ng4中，有兩種方式去聲明一個表單。

1.Template-Driven Forms - 模板驅動式表單

<form #f=‘ngForm‘ novalidate (ngSumbit)=‘onSubmit(f)‘>
  <input type=‘text‘
             #username=‘ngModel‘
             required>
  <div *ngIf=‘username.error?.required && username.touched‘ class=‘error‘>
    Name is required. 
 
 
</div> 
</form> 

註意：

1.

把ngForm的值賦給#f變量，通過該變量則可以方便的獲取表單的值

<form #f=‘ngForm‘ novalidate (ngSumbit)=‘onSubmit(f)‘>
  <input type=‘text‘
             name=‘username‘
             [(ngModel)]=‘user.username‘
             required>
  <div *ngIf=‘f.controls.username?.required‘ class
 
=‘error‘>
    Name is required. 
 </div> 
</form>  
   

2.

使用ngModel指令，ngModel會自動關聯表單控件name屬性，並使用該值作為ngForm對象的屬性名

<input type=‘text‘ name=‘username‘ ngModel>

<input type=‘text‘ name=‘username‘ [ngModel]=‘user.username‘>

<input type=‘text‘ name=‘username‘ [(ngModel)]
 
=‘user.username‘>

3.

[(ngModel)]=‘user.username‘ <=> [ngModel]=‘user.username‘+(ngModelChange)=‘user.username=$event‘

兩種寫法是等價的

4.

#username - 指向input表單控件

#username=‘ngModel‘ -指向NgModel實例

2.

除了required驗證

還是有minlength、maxlength等驗證規則

3.

除了touched狀態

還有valid(控件有效)、invalid(控件無效)、pristine(控件值未改變)、dirty(控件值已改變)、untouched(表單控件未被訪問過)

ng4 Form表單相關