欄位驗證
說明
- 在輸入欄位上套用驗證屬性
- 欄位驗證成功,ngModel物件的errors屬性會回傳null
- 欄位驗證失敗,ngModel物件的errors屬性會回傳所有驗證狀態
- 內建驗證器
- required:必填欄位
- minlength:欄位不可少於的最小字元數
- maxlength:欄位不可多於的最大字元數
- 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
按鍵,一次刪除一個字元,測試下方灰色區域的資料