欄位驗證

說明

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按鍵，一次刪除一個字元，測試下方灰色區域的資料