【Angularjsドキュメント翻訳およびインスタンス】フォーム命令セット(input)

最近Angularの知識を読んでいると、本の中でもネット上でも、フォームに関する命令セットを説明するのはポイントまでで、基礎検証を話しています.例えば、空かどうか、emailアドレスかどうか、もっと説明していませんが、Angularの公式ドキュメントを見てみると、inputコントロールに関する命令セットが本当に豊富であることがわかりました.HTML 5に関する新しいコントロールもたくさんあるので、input関連のコマンドセット部分の英語ドキュメントに自分の理解を加えて翻訳してみましたが、不適切な点があれば見て指摘してほしいです.
Angularは本当に強くて、目の前が明るくなります.
に約束
パラメータ名はアルパカで書きます.たとえばngShowです.このパラメータがコントロールのプロパティに使用される場合、プロパティ名はng-showです.これを約束とする.
input
使用法

...

パラメータの説明
パラメータ
を選択します.
詳細
ngModel
string
データバインド用のパラメータの変更
name(optional)
string
コントロールカスタム名、実行中に使用できる名前制御コントロール
required(optional)
string
このプロパティを追加し、コンテンツが空の場合は$errorを設定します.requiredはtrue
ngRequired(optional)
boolean
必須の場合、このプロパティはtrueに設定されます.
ngMinlength(optional)
number
入力長さがこの値より小さい場合は$errorが設定されます.minはtrue
ngMaxlength(optional)
number
入力長さがこの値より大きい場合は$errorが設定されます.maxはtrueです.この値が負数または非数値に設定されている場合は、任意の長さを入力できます.
ngPattern(optional)
string
このプロパティの式が入力値に一致しない場合は、$errorが設定されます.patternはtrueです.式がRegExpオブジェクトの場合は、そのまま使用されます.式が文字列の場合、Angularは文字列の外側に^と$を追加します.たとえば、abcはnew RegExp('^abc&')に変換されます.
ngChange(optional)
string
onChangeイベントバインド
ngTrim(optional)
boolean
falseの場合、入力はトリムされません.入力ボックスのタイプがpasswordの場合、このプロパティは機能しません.デフォルトはtrue
小贴士:覚えておいて、$errorを使用するときは、コントロールのname値を変数として使用し、ngModel値を変数として使用するべきではありません.
次のコードでは、requiredプロパティとngMinlengthプロパティの使い方、および$errorの実際の応用をそれぞれ示します.
ngShowの内容に注意してください.使用する変数はすべてname属性の値です.

    

        
input1 is empty.
        
input2 is must longer than 5
        

            input1:(   required  ，          )
            
        
        

            input2:(   ngMinlength  ，        )
            
        
        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';
});

実行効果:https://jsfiddle.net/Lionney/my2ht8fx/
input[checkbox]、input[date]およびinput[datetime-local]
input[checkbox]用法

ここで、ngMode、name、およびngChangeはinputのパラメータリストを参照してください.以下には、前のコントロールとは異なるパラメータのみがリストされます.
パラメータの説明
パラメータ
を選択します.
詳細
ngTrueValue(optional)
expression
選択ボックスが選択されている場合、この属性の値が返されます.このプロパティの内容はデフォルトで式であるため、文字型データの場合は'を外部で使用して含めます.たとえば、ng-true-value=「'abc'」の場合、式で処理されます.
ngFalseValue(optional)
expression
選択ボックスが選択されていない場合、この属性の値が返されます.残りは同じです.
input[date]の使い方

ここで、ngMode、name、required、ngRequiredおよびngChangeはinputのパラメータリストを参照してください.以下には、inputコントロールとは異なるパラメータのみがリストされます.
パラメータの説明
パラメータ
を選択します.
詳細
min(optional)
string
日付セレクタは、HTML 5に新しく追加されたフォームコントロールのタイプで、コントロールの最小選択可能な日付を設定します.この属性はISO日付文字列(yyyy-MM-dd)形式を使用する必要があります.もちろん、変数を挿入することもできます(詳細はコメント1を参照).このプロパティ設定の最小値に一致しない場合は$errorが設定されます.minはtrueです.
max(optional)
string
この属性は、日付制御を設定するために選択できる最大日付です.その他は前のパラメータと同じです.このプロパティ設定の最小値に一致しない場合は$errorが設定されます.maxはtrueです.
ngMin(optional)
datestring
これはangularの属性で、設定後、コントロールの最小選択可能な日付には影響しません.ユーザーが入力した属性と一致しない場合、$errorが設定されます.minはtrueです.属性設定方法はminパラメータと同じです
ngMax(optional)
datestring
これはangularの属性で、設定後、コントロールの最大選択可能な日付には影響しません.ユーザーが入力した属性と一致しない場合、$errorが設定されます.maxはtrueです.属性設定方法maxパラメータと同じ
注記1:min="{{minDate|date:'yyyy-MM-dd'}"
input[datetime-local]用法

このコントロールはdateコントロールと同じですが、min、max、ngMin、ngMaxの属性を設定する場合、内容が異なります.このコントロールは日付と時間を選択するため、設定時に時間を加え、フォーマットはISOで規定された日付時間フォーマット(yyy-MM-ddTHH:mm:ss)を使用し、日付フィルタを使用する場合、フォーマット:{{maxDatetimeLocal|date:'yyyy-MM-ddTHH:mm:ss'}}}
その他のパラメータの説明はdateと同様であり、dateパラメータの説明を参照することができる.
次の例は、上記のコントロールを使用した統合例です.コードは次のとおりです.

    

          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');
});

プログラムの説明
$errorを使用する場合は、コントロールのnameとngModelのプロパティを同時に設定し、nameのプロパティ値を変数として使用する必要があります.そうしないと、プログラムは検証効果に達しません.検証のヒント情報もformフォームに置く必要があります.コードにはngShowの一部が含まれています.
checkboxの初期化には、このコードに示すck 1の2つの方法がある.ngTureValue/ngFalseValueが設定されていない場合は、true/falseを直接割り当てることができます.2つ目は、このコードに示すck 2である.ngTureValue/ngFalseValueが設定されている場合は、ngTureValue/ngFalseValueの値を使用して選択ボックスの状態を初期化します.
実行効果https://jsfiddle.net/Lionney/snojqoqy/