Angular4 開發(fā)實(shí)戰(zhàn)：(9) 創(chuàng)建表單

• NgForm指令為form增補(bǔ)了一些額外特性。 它會控制那些帶有ngModel指令和name屬性的元素，監(jiān)聽他們的屬性（包括其有效性）。 它還有自己的valid屬性，這個(gè)屬性只有在它包含的每個(gè)控件都有效時(shí)才是真。
• 當(dāng)使用ngForm方式創(chuàng)建表單時(shí)，其內(nèi)部的每個(gè) input 元素都必須有name屬性，Angular 表單用它注冊控件。實(shí)質(zhì)上是ngModel和name屬性一起創(chuàng)建了一個(gè)FormControl。

表單驗(yàn)證 html5內(nèi)置的數(shù)據(jù)驗(yàn)證包括Required、minLength、maxLength、pattern ，我們可以將這些標(biāo)簽應(yīng)用到我們的輸入控件上。 這些驗(yàn)證整合起來說就是：表單是合法(valid)的，還是不合法(invalid)的。 我們來修改一下代碼：

// demo-form.component.html   
<div class="box">   
  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.form.valid)" novalidate>   
    <div>   
      <label>   
        用戶：<input type="text" name="name" [(ngModel)]="name" required>   
      </label>   
      <p *ngIf="userForm.controls['name']?.invalid" class="error">用戶名必填</p>   
    </div>   
    <div>   
      <label>   
        電話：<input type="text" name="tel" [(ngModel)]="tel" pattern="1[3|5|8]\d{9}" required>   
      </label>   
    </div>   
    <div>   
      <label>   
        性別：   
        <select [(ngModel)]="sex" name="sex" required>   
          <option value="man">男</option>   
          <option value="female">女</option>   
        </select>   
      </label>   
      <p *ngIf="userForm.controls['sex']?.errors?.required"></p>   
    </div>   
    <button type="submit"  [disabled]="!userForm.form.valid">發(fā)布</button>   
  </form>  
</div>

在上面的代碼中，我們?yōu)槿齻€(gè)表單都增加required必填屬性，同時(shí)在提交按鈕上添加disabled屬性，并且值是userForm.form.valid，這表示只有當(dāng)前form里所有表單元素(input,select等)都合法時(shí)，才可以提交，否則禁用按鈕。 還有在input[name='name']底部添加一個(gè)驗(yàn)證提示：

<p *ngIf="userForm.controls['name']?.invalid" class="error">用戶名必填</p>

在前面提過，Angular使用ngModel和name屬性構(gòu)建了一個(gè)FormControl，這也是我們可以通過NgForm.controls獲取里面所有具有name屬性的表單，它是一個(gè)數(shù)組。 而對于每一個(gè)FormControl，它都有以下驗(yàn)證屬性： errors errors包含了表單所有的驗(yàn)證內(nèi)容。比如：

form.controls.name.errors.required  // 必填項(xiàng)  
form.controls.name.errors.minlength  // 最小數(shù)  
form.controls.name.errors.maxlength  //  最大數(shù)

當(dāng)然，除了通過form的模板變量來訪問其內(nèi)的表單元素，我們也可以為其內(nèi)的表單元素定義自己的模板變量。 我們修改一下input[name=sex]：

<div>   
  <label> 
     性別：   
     <select [(ngModel)]="sex" name="sex" required #sexInput="ngModel">   
       <option value="man">男</option>   
       <option value="female">女</option>   
     </select>   
  </label>   
  <p *ngIf="sexInput.invalid" class="error">不合法</p>   
  <p *ngIf="sexInput.errors?.required"></p>   
</div>

在上面的代碼中，我們通過#sexInput="ngModel"來獲取到當(dāng)前input的FormControl。