欄位驗證


說明

  1. 在輸入欄位上套用驗證屬性
  2. 欄位驗證成功,ngModel物件的errors屬性會回傳null
  3. 欄位驗證失敗,ngModel物件的errors屬性會回傳所有驗證狀態
  4. 內建驗證器
    1. required:必填欄位
    2. minlength:欄位不可少於的最小字元數
    3. maxlength:欄位不可多於的最大字元數
    4. pattern:須符合給予的正規表示式

template語法:

<input type="text" name="xxx" [(ngModel)]="xxx" required>

程式碼範例:

1.在template-driven-form.component.html中將name欄位設定required與minlength

<input class="form-control rounded" name="name" [(ngModel)]="data.name" #mName="ngModel" required minlength>

2.在template-driven-form.component.html中,將下方灰色區域的html改為如下,顯示name的errors屬性

<pre>{{mName.errors | json}}</pre>

3.用Backspace按鍵,一次刪除一個字元,測試下方灰色區域的資料

results matching ""

    No results matching ""