1.實現雙向資料繫結：

<div class="label">
   <label>測試一：
      <input type="text" [(ngModel)]='str' >
      <span>{{str}}</span>
   </label>
</div>

2.新增簡單的驗證功能：

       目前 Angular 支援的內建 validators（驗證器）有如下五種；

（1）required - 設定表單控制元件值時非空的；

（2）email - 設定表單控制元件值的格式是 email；

（3）minlength - 設定表單控制元件值的最小長度；

（4）maxlength - 設定表單控制元件值的最大長度；

（5）Angular 提供兩種驗證方式：valid（是否正確），errors（錯誤）

（6）示例（#名稱='ngModel'必須要加）：

<div class="label">
   <label>測試一：
      <input type="text" [(ngModel)]='str' required #user='ngModel'>
      <span>{{user.valid}}</span>
   </label>
</div>
 

3.新增聚焦事件：

<div class="label">
   <label>測試一：
      <input type="text" [(ngModel)]='str' required #user='ngModel' (focus)='onFocus()'>
      <span>{{name}}</span>
   </label>
</div>

//ts檔案
name = '';
onFocus(){
    this.name = '欄位不能為空'
}

4.新增驗證失敗的錯誤資訊：

<div class="label">
   <label>測試一：
      <input type="text" [(ngModel)]='str' required minlength='6' maxlength='9' #user='ngModel' (focus)='onFocus()'>
      <span *ngIf='user.errors?.required'>{{name}}</span>
      <span *ngIf='user.errors?.minlength'>請輸入6到9位的欄位</span>
   </label>
</div>

//ts檔案
name = '';
onFocus(){
    this.name = '欄位不能為空'
}