【Angularjs文檔翻譯及實(shí)例】表單指令集（input）

reclay 發(fā)布于2019-08-19 17:43 / 1084人閱讀

摘要：設(shè)置了屬性，清空一下內(nèi)容查看效果設(shè)置了屬性，增加內(nèi)容查看效果運(yùn)行效果以及用法其中以及請(qǐng)參照的參數(shù)列表，下面，僅列出與上個(gè)控件不同的參數(shù)。

最近在看Angular的知識(shí)，無論是書中還是網(wǎng)上，講解跟表單有關(guān)的指令集都是點(diǎn)到為止，講些基礎(chǔ)驗(yàn)證，比如，是否為空，是否為email地址，更多的并沒有講解，但是，當(dāng)我查看Angular的官方文檔時(shí)，發(fā)現(xiàn)與input控件相關(guān)的指令集真的很豐富，有關(guān)HTML5新增的控件也有很多，所以，我試著將input相關(guān)的指令集部分的英文文檔再加上自己的理解翻譯了一下，如果有不當(dāng)?shù)牡胤竭€希望各位看觀指正。

Angular真的很強(qiáng)大，強(qiáng)大的讓人眼前一亮。

約定

參數(shù)名會(huì)使用駝峰式書寫。例如ngShow，此參數(shù)用在控件的屬性時(shí)，屬性名為：ng-show。以此為約定。

input

用法

...

參數(shù)說明

參數(shù)	類型	詳情
ngModel	string	改選參數(shù)，用于數(shù)據(jù)綁定
name(optional)	string	控件自定義名稱，運(yùn)行期間可使用些名稱控制控件
required(optional)	string	如果添加此屬性，并且內(nèi)容為空，則設(shè)置$error.required為true
ngRequired(optional)	boolean	如果必填，則此屬性設(shè)置為true
ngMinlength(optional)	number	如果輸入的長(zhǎng)度小于此值，就會(huì)設(shè)置$error.min為true
ngMaxlength(optional)	number	如果輸入的長(zhǎng)度大于此值，就會(huì)設(shè)置$error.max為true。如果此值設(shè)置為負(fù)數(shù)或者非數(shù)值，則表示可輸入任意長(zhǎng)度。
ngPattern(optional)	string	如果此屬性中的表達(dá)式不能匹配輸入的值，就會(huì)設(shè)置$error.pattern為true。如果表達(dá)式為RegExp對(duì)象，那么就會(huì)直接使用。如果表達(dá)式是一個(gè)字符串，那么Angular會(huì)在字符串外層增加^和$。比如，"abc"將會(huì)轉(zhuǎn)換為new RegExp("^abc&")。
ngChange(optional)	string	onChange事件綁定
ngTrim(optional)	boolean	如果為false，不會(huì)修剪輸入。如果輸入框的類型為password，此屬性無作用。默認(rèn)是true

小貼士：記得，在使用$error時(shí)，要使用控件的name值作為變量，不應(yīng)該使用ngModel值作為變量。

下面的代碼分別演示了required和ngMinlength屬性的用法，以及$error的實(shí)際應(yīng)用。

請(qǐng)注意ngShow中的內(nèi)容，使用的變量全部是name屬性的值。


    
        input1 is empty.
        input2 is must longer than 5
        
            input1:(設(shè)置了required屬性，清空一下內(nèi)容查看效果)
            
        
        
            input2:(設(shè)置了ngMinlength屬性，增加內(nèi)容查看效果)
            
        
        form.txt1.$error.required:{{form.txt1.$error.required}}
        

        form.txt2.$error.minlength:{{form.txt2.$error.minlength}}

var app = angular.module("myapp", []);

app.controller("inputCtrl", function($scope) {
    $scope.input1 = "required";
    $scope.input2 = "min";
});

運(yùn)行效果：https://jsfiddle.net/Lionney/my2ht8fx/

input[checkbox]、input[date]以及input[datetime-local]

input[checkbox]用法

其中ngMode、name以及ngChange請(qǐng)參照input的參數(shù)列表，下面，僅列出與上個(gè)控件不同的參數(shù)。

參數(shù)說明

參數(shù)	類型	詳情
ngTrueValue(optional)	expression	當(dāng)選擇框?yàn)檫x中狀態(tài)時(shí)，則返回此屬性中的值。此屬性內(nèi)容默認(rèn)為表達(dá)式，所以，如果是字符型數(shù)據(jù)，則要在外面使用"包含起來。比如：ng-true-value=""abc"",否則會(huì)按表達(dá)式處理。
ngFalseValue(optional)	expression	當(dāng)選擇框?yàn)槲催x中狀態(tài)時(shí)，則返回此屬性中值。其余同上。

input[date]用法

其中ngMode、name、required、ngRequired以及ngChange請(qǐng)參照input的參數(shù)列表，下面，僅列出與input控件不同的參數(shù)。

參數(shù)說明

參數(shù)	類型	詳情
min(optional)	string	日期選擇器是HTML5中新加的表單控件類型，此屬性是為了設(shè)置控件最小可選擇的日期。這個(gè)屬性必須使用ISO日期字符串（yyyy-MM-dd）格式。當(dāng)然，也可以插入變量（詳見注釋1）。如果不符合此屬性設(shè)置的最小值，則會(huì)設(shè)置$error.min為true。
max(optional)	string	此屬性為設(shè)置日期控制所能選擇的最大日期。其它與上一參數(shù)相同。如果不符合此屬性設(shè)置的最小值，則會(huì)設(shè)置$error.max為true。
ngMin(optional)	datestring	此為angular的屬性，設(shè)置后，不會(huì)影響控件的最小可選擇日期，如果用戶選擇填寫的與屬性不符，則會(huì)設(shè)置$error.min為true。屬性設(shè)置方法與min參數(shù)相同
ngMax(optional)	datestring	此為angular的屬性，設(shè)置后，不會(huì)影響控件的最大可選擇日期，如果用戶選擇填寫的與屬性不符，則會(huì)設(shè)置$error.max為true。屬性設(shè)置方法與max參數(shù)相同

注釋1：min="{{minDate | date:"yyyy-MM-dd"}}"

input[datetime-local]用法

此控件與date控件一樣，只是在設(shè)置min、max、ngMin、ngMax屬性時(shí)，內(nèi)容有所不同，因?yàn)榇丝丶沁x擇日期及時(shí)間，所以設(shè)置的時(shí)候要加上時(shí)間，格式依然要使用ISO規(guī)定的日期時(shí)間格式（yyyy-MM-ddTHH:mm:ss），當(dāng)使用日期過濾器時(shí)，格式化為："{{maxDatetimeLocal | date:"yyyy-MM-ddTHH:mm:ss"}}"

其它的參數(shù)說明與date是一樣，可以參照date參數(shù)說明。

下面實(shí)例為使用了以上控件的綜合實(shí)例，代碼如下：


    
        選擇1
        

        選擇2
        

        
        min validate error.
        

        
        min validate error.
        

        ck={{ck1}}
        

        ck={{ck2}}
        

        dd={{dd}}
        

        dl={{dl}}

var app = angular.module("checkbox", []);

app.controller("ckCtrl", function($scope) {
    $scope.ck1 = true;
    $scope.ck2 = 7
    $scope.dd = new Date("2017-01-01");
    $scope.dl = new Date("2017-01-01 08:08:00");
});

程序說明

當(dāng)使用$error時(shí)，必須同時(shí)設(shè)置控件的name與ngModel屬性，使用name屬性值做為變量，否則，程序?qū)⑦_(dá)不到驗(yàn)證效果。驗(yàn)證的提示信息也必須放在form表單中，見代碼中帶有ngShow部分內(nèi)容。

checkbox的初始化有兩種方式，第一種即此代碼中所展示的ck1。如果沒有設(shè)置ngTureValue/ngFalseValue的話，可以直接賦值true/false。第二種為此代碼中所展示的ck2。如果設(shè)置了ngTureValue/ngFalseValue，那么要使用ngTureValue/ngFalseValue中的值來初始化選擇框狀態(tài)。

運(yùn)行效果https://jsfiddle.net/Lionney/snojqoqy/