在網(wǎng)頁(yè)開(kāi)發(fā)中，表單估計(jì)是最常用的一個(gè)，同時(shí)也是最麻煩、最容易出問(wèn)題的。在一個(gè)稍微復(fù)雜一點(diǎn)的應(yīng)用中，我們除了用表單元素收集數(shù)據(jù)，還需要驗(yàn)證，幾個(gè)數(shù)據(jù)之間可能還會(huì)相互關(guān)聯(lián)，然后根據(jù)不同的數(shù)據(jù)值調(diào)用不同的業(yè)務(wù)邏輯等。

使用Angular提供的數(shù)據(jù)綁定的功能，我們可以很容易就在組件中獲得用戶(hù)輸入的數(shù)據(jù)，Angular也提供了幾種驗(yàn)證方式方便我們進(jìn)行數(shù)據(jù)的校驗(yàn)。但是，一些自定義的數(shù)據(jù)驗(yàn)證、數(shù)據(jù)交互和業(yè)務(wù)邏輯還是需要自己處理。

在A(yíng)ngular2中，提供了2種表單實(shí)現(xiàn)方式，分別是'template-driven'（模板驅(qū)動(dòng)的表單）和'model-driven'（模型驅(qū)動(dòng)表單）。在這篇文章中，我們先來(lái)看看模板驅(qū)動(dòng)的表單。顧名思義，模板驅(qū)動(dòng)的表單就是大部分表單相關(guān)代碼都在模板里，通過(guò)在模板里面添加ngForm, ngModel和ngModelGroup等屬性來(lái)定義模板和驗(yàn)證信息，以及它跟組件之間的數(shù)據(jù)交互。

實(shí)例

下圖是這篇文章使用的實(shí)例的界面：

它是一個(gè)用戶(hù)信息輸入的表單，包括4個(gè)字段，用戶(hù)名、電話(huà)、城市和街道，演示了如何使用表單，給各個(gè)字段添加驗(yàn)證并顯示驗(yàn)證結(jié)果，以及如何在組件中判斷是否出錯(cuò)并獲取出錯(cuò)信息。

項(xiàng)目源碼可以從github獲取，這個(gè)項(xiàng)目包含了幾個(gè)Angular2表單相關(guān)的實(shí)例，可以使用下面的命令獲取本文所對(duì)應(yīng)的代碼：

git clone https://github.com/Mavlarn/angular2-forms-tutorial

然后進(jìn)入項(xiàng)目目錄，運(yùn)行下面的命令安裝依賴(lài)然后運(yùn)行測(cè)試服務(wù)器：

cd angular2-forms-tutorial
git checkout template-driven # 檢出該文所使用的tag
npm install
npm start

該項(xiàng)目是基于之前的Angular2-basic模板，這個(gè)教程相關(guān)的代碼都在'template-forms'目錄里面。

引入FormsModule

首先，我們需要在app.module.ts里引入FormsModule。

import { FormsModule } from '@angular/forms';
//省略其他
@NgModule({
 imports: [ BrowserModule, FormsModule ],
 //省略其他
})

初始表單

然后，我們從一個(gè)基本的html表單開(kāi)始：

<form>
 <label>姓名:</label>
 <input type="text">
 <label>電話(huà):</label>
 <input type="text">
 <label>城市:</label>
 <input type="text">
 <label>街道:</label>
 <input type="text">
 <button type="submit">保存</button>
</form>

在實(shí)際的實(shí)例中，使用了bootstrap的表單樣式，一組輸入框應(yīng)該是下面這個(gè)樣子，但是在本文中，為了節(jié)省頁(yè)面顯示的篇幅，我省略了div, form-group等，我們只需要關(guān)心如何在A(yíng)ngular2中使用模板驅(qū)動(dòng)的表單。如果想查看完整的帶樣式的代碼，請(qǐng)查看源文件。

<div class="form-group">
  <label class="col-sm-2 control-label">姓名:</label>
  <div class="col-sm-10">
    <input class="form-control" type="text">
  </div>
</div>

ngForm

在上面的表單里，我們沒(méi)有使用Angular2的任何功能，如數(shù)據(jù)綁定，也沒(méi)有使用其他指令。但是，Angular2在<form>上實(shí)現(xiàn)了一個(gè)指令'ngForm'，這樣，對(duì)于所有的html的form表單，都會(huì)使用ngForm組件去初始化該表單。

使用ngForm對(duì)象

接下來(lái)，我們需要在模板里面訪(fǎng)問(wèn)這個(gè)ngForm的實(shí)例，這樣我們就能夠從這個(gè)實(shí)例里面獲取數(shù)據(jù)，或者獲取數(shù)據(jù)驗(yàn)證狀態(tài)。
在A(yíng)ngular2里，都提供了一個(gè)模板引用變量的功能，通過(guò)#加變量實(shí)現(xiàn)。通過(guò)這個(gè)功能，我們可以在同一元素、兄弟元素或任何子元素中引用模板引用變量。這樣聽(tīng)著還是不好理解，我們看一個(gè)例子：

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

在這個(gè)例子中，我們通過(guò)#phone定義了一個(gè)變量，它所指的就是這個(gè)input元素，phone.value也就是這個(gè)輸入框輸入的值。

除了使用#，也可以使用ref-，例如ref-phone形式的定義跟#phone是一樣的。

我們可以對(duì)任何的DOM元素使用這種方式獲取當(dāng)前引用，也可以對(duì)任何的Angular2的指令使用。在這個(gè)表單的例子中，我們這樣來(lái)獲取這個(gè)ngFrom的引用：

<form #userForm="ngForm">

其中'ngForm'就是當(dāng)前這個(gè)指令，這樣在這個(gè)模板里面，我們可以用userForm獲得表單的所有數(shù)據(jù)。

提交表單

在html中，我們要提交一個(gè)form，會(huì)在form里寫(xiě)一個(gè)action的屬性，然后，用一個(gè)類(lèi)型為'submit'的按鈕來(lái)提交。但是，在A(yíng)ngular2中，我們需要使用ngSubmit事件：

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)">
  <button type="submit">保存</button>
</form>

這樣，當(dāng)用戶(hù)點(diǎn)擊保存按鈕的時(shí)候，Angular2會(huì)使用自己的驗(yàn)證機(jī)制，驗(yàn)證所有的數(shù)據(jù)，然后在調(diào)用'logForm(userForm)'方法。

在我們的組件中，實(shí)現(xiàn)這個(gè)方法：

logForm(theForm: NgForm) {
  console.log(theForm.value);
  if (theForm.invalid) {
    // handle error.
  }
}

在這個(gè)方法里，我們使用theForm.invalid就可以獲得這個(gè)表單是否驗(yàn)證成功的狀態(tài)，也可以用'theForm.value'獲得所有的表單數(shù)據(jù)。在這里，我們把表單數(shù)據(jù)打印到控制臺(tái)來(lái)檢查數(shù)據(jù)。至于如何從這個(gè)表單引用中獲取控件數(shù)據(jù)和狀態(tài)，會(huì)在接下來(lái)再講。

使用ngModel綁定數(shù)據(jù)

接下來(lái)，我們需要綁定數(shù)據(jù)。假設(shè)我們的業(yè)務(wù)是打開(kāi)這個(gè)頁(yè)面的時(shí)候獲取用戶(hù)數(shù)據(jù)，然后顯示到頁(yè)面表單上。我們?cè)诮M件的構(gòu)造方法中創(chuàng)建一個(gè)模擬的用戶(hù)數(shù)據(jù)：

export class TemplateFormsComponent {
  user: any;
  constructor() {
    this.user = {
      name: '張三',
      mobile: 13800138001,
      city: '北京',
      street: '朝陽(yáng)望京...'
    };
  }
}

然后在模板中將這個(gè)組件中的數(shù)據(jù)綁定到模板頁(yè)面上：

<input type="text" name="name" [(ngModel)]="user.name">
<input type="text" name="mobile" [ngModel]="user.mobile">
<input type="text" name="city" [ngModel]="user.city">
<input type="text" name="street" [ngModel]="user.street">
<!-- 其他的輸入框都類(lèi)似 -->

在這里，我們使用[(ngModel)]="user.name"，這是雙向綁定的方式，這樣，當(dāng)我們修改頁(yè)面上的數(shù)據(jù)的時(shí)候，在組件中也能獲得更新后的數(shù)據(jù)；同時(shí)，如果在組件中更新了數(shù)據(jù)，在頁(yè)面上也能更新。

為了演示這個(gè)雙向綁定跟單向綁定的區(qū)別，我們只對(duì)姓名使用雙向綁定，對(duì)其他的都是用單向綁定，也就是[ngModel]="user.mobile"。使用[]的單向綁定是從模板到組件的綁定，也就是頁(yè)面中的輸入的數(shù)據(jù)改變，組件中的數(shù)據(jù)也會(huì)改變。但是組件中的數(shù)據(jù)更新不會(huì)引起頁(yè)面上該數(shù)據(jù)的更新。

使用單向綁定可以減少數(shù)據(jù)的更新檢查，從來(lái)可以提高性能。

如果不需要數(shù)據(jù)的初始化，我們其實(shí)可以只用ngModel，例如：

<input type="text" name="city" ngModel>

這樣，我們?cè)诮M件中創(chuàng)建的用戶(hù)數(shù)據(jù)就無(wú)法顯示到頁(yè)面上，但是，他還是能夠?qū)㈨?yè)面上輸入的數(shù)據(jù)綁定到組件中的數(shù)據(jù)上。

在A(yíng)ngular2中，使用ngModel結(jié)合name屬性來(lái)創(chuàng)建一個(gè)表單控件FormControls。例如上面的<input name="city" ngModel>就對(duì)應(yīng)一個(gè)userForm里面的控件city。由于我們?cè)谔峤环椒ɡ锩鎸⑦@個(gè)userForm作為參數(shù)傳到方法里，我們可以在方法里面獲得所有的表單控件theForm.controls，它是一個(gè)Map類(lèi)型的對(duì)象，key是所有的表單元素的name，值就是一個(gè)FormControl對(duì)象，里面保存著數(shù)據(jù)、和驗(yàn)證結(jié)果、是否修改等狀態(tài)。也正是因?yàn)檫@些FormControls，我們才能夠使用theForm.value的方式獲取表單里的數(shù)據(jù)。當(dāng)我們點(diǎn)擊保存按鈕的時(shí)候，就能在日志里面看到表單的數(shù)據(jù)：

{
  name: "張三",
  mobile: 13800138001,
  city: "北京",
  street: "朝陽(yáng)望京..."
}

使用ngModelGroup分組顯示

一般情況下，我們的model數(shù)據(jù)有可能是嵌套的，比如對(duì)于用戶(hù)信息來(lái)說(shuō)，城市和街道可能在一個(gè)地址對(duì)象address里，例如：

{
  name: "張三",
  mobile: 13800138001,
  address: {
    city: "北京",
    street: "朝陽(yáng)望京..."
  }
}

對(duì)于這樣的數(shù)據(jù)，我們就可以使用ngModelGroup來(lái)分組。模板就是這樣：

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)">
 <label>姓名:</label>
 <input type="text" name="name" [(ngModel)]="user.name">
 <label>電話(huà):</label>
 <input type="text" name="mobile" [ngModel]="user.mobile">
 <fieldset ngModelGroup="address">
  <label>城市:</label>
  <input type="text" name="city" [ngModel]="user.address.city">
  <label>街道:</label>
  <input type="text" name="street" [ngModel]="user.address.street">
  <button type="submit">保存</button>
 </fieldset>
</form>

這樣我們就把地址信息都封裝到一個(gè)address對(duì)象里面。注意我們綁定的數(shù)據(jù)的結(jié)構(gòu)也發(fā)生改變，這樣，我們也需要修改我們的組件里面的用戶(hù)數(shù)據(jù)：

export class TemplateFormsComponent {
  user: any;
  constructor() {
    this.user = {
      name: '張三',
      mobile: 13800138001,
      address: {
        city: '北京',
        street: '朝陽(yáng)望京...'
      }
    };
  }
}

至此，我們的表單的基本功能就算完成了。我們?cè)诿姘逯袆?chuàng)建了表單，在組件中初始化了用戶(hù)數(shù)據(jù)，并顯示到頁(yè)面上，在頁(yè)面上用ngModel，將頁(yè)面上的數(shù)據(jù)更改綁定到組件上。同時(shí)，使用name屬性，使得表單里面的所有數(shù)據(jù)都成為FormControl對(duì)象。在提交所調(diào)用的方法里，獲得了表單的驗(yàn)證狀態(tài)和數(shù)據(jù)。

表單控件的驗(yàn)證和狀態(tài)

下一步，我們來(lái)添加數(shù)據(jù)驗(yàn)證，Angular2為我們提供了幾種最基本的驗(yàn)證：

• required：表明該數(shù)據(jù)是必須的。
• minlength：設(shè)置該字段的長(zhǎng)度的最小值，即使輸入的是數(shù)字，也按照字符串來(lái)判斷長(zhǎng)度。
• maxlength：設(shè)置該字段的長(zhǎng)度的最大值。
• pattern：使用正則表達(dá)式驗(yàn)證

在使用Angular的驗(yàn)證之前，我們首先需要關(guān)閉瀏覽器默認(rèn)的驗(yàn)證，不然，如果某一個(gè)輸入不合法，提交按鈕就無(wú)法提交。我們?cè)趂orm里添加novalidate：

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate>

然后，我們對(duì)姓名輸入框添加驗(yàn)證，并根據(jù)驗(yàn)證的結(jié)果顯示不同的提示，同時(shí)，為了演示Angular2表單控件的特性，再添加幾個(gè)提示，來(lái)顯示該值的狀態(tài)，代碼如下：

<input type="text" name="name" [(ngModel)]="user.name" #name="ngModel" required minlength="3">
<span *ngIf="name.pristine" class="label label-primary">未修改</span>
<span *ngIf="name.dirty" class="label label-warning">已修改</span>
<span *ngIf="name.valid" class="label label-success">有效</span>
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
  <p *ngIf="name.errors?.minlength">姓名最小長(zhǎng)度為3</p>
  <p *ngIf="name.errors?.required">必須輸入姓名</p>
</div>

首先，我們?cè)趇nput上添加了2個(gè)驗(yàn)證，required和minlength="3"。

其次，我們使用#name="ngModel"創(chuàng)建了一個(gè)模板引用變量，這樣我們?cè)谙旅婢涂梢允褂胣ame來(lái)獲取這個(gè)表單控件（FormControl）的引用。表單控件有一些屬性，如pristine, dirty, valid, touched，這幾個(gè)都是狀態(tài)類(lèi)型，表示某一種狀態(tài)是否為真。除此以外還有控件的值可以用name.value獲取。最后，還有驗(yàn)證的錯(cuò)誤信息結(jié)果，會(huì)放在name.errors里。

在上面的代碼里，我們用<span *ngIf="name.pristine" class="label label-primary">未修改</span>，在控件值未被修改的時(shí)候，顯示一個(gè)lebel。同樣，在被修改、驗(yàn)證有效的時(shí)候顯示相應(yīng)的標(biāo)簽。

最后，所有的驗(yàn)證結(jié)果的錯(cuò)誤信息會(huì)保存在name.errors里，如果沒(méi)有數(shù)據(jù)驗(yàn)證錯(cuò)誤，這個(gè)errors值就是null，所以，在上面的代碼里，我們用name.errors?.minlength，這表示，如果errors不為null，而且errors.minlength也不為空的時(shí)候，才顯示里面的信息。

我們可以看到，表單控件的驗(yàn)證會(huì)將驗(yàn)證器的名字作為key放在errors里面，對(duì)應(yīng)的值是true。我們就是用這個(gè)特性，來(lái)根據(jù)控件驗(yàn)證的不同結(jié)果，來(lái)顯示友好的錯(cuò)誤信息。

如果運(yùn)行我們的實(shí)例，可以發(fā)現(xiàn)，對(duì)于姓名，如果清空它的值，發(fā)現(xiàn)只有一個(gè)錯(cuò)誤信息，就是必須輸入姓名。你可能會(huì)覺(jué)得，這時(shí)候，值為空，那他的長(zhǎng)度也小于3，那么minlength這個(gè)錯(cuò)誤也應(yīng)該被檢測(cè)到才對(duì)，但是實(shí)際上，遇到第一個(gè)錯(cuò)誤以后，就沒(méi)有其他的驗(yàn)證。

在上面姓名輸入框上，我們使用#name="ngModel"創(chuàng)建了一個(gè)模板引用變量，然后在接下來(lái)的模板里面使用它獲得表單控件。實(shí)際上，我們也可以直接使用之前定義的對(duì)ngForm的引用，來(lái)獲得這個(gè)表單里所有控件的狀態(tài)。例如，對(duì)電話(huà)，我們使用下面的方式：

<input type="text" name="mobile" [ngModel]="user.mobile" required minlength="11" maxlength="11">
<span *ngIf="userForm.controls.mobile?.pristine" class="label label-primary">未修改</span>
<span *ngIf="userForm.controls.mobile?.dirty" class="label label-warning">已修改</span>
<span *ngIf="userForm.controls.mobile?.valid" class="label label-success">有效</span>
<div [hidden]="userForm.controls.mobile?.valid || userForm.controls.mobile?.pristine" class="alert alert-danger">
  <p *ngIf="userForm.controls.mobile?.errors?.minlength">電話(huà)長(zhǎng)度必須為11</p>
  <p *ngIf="userForm.controls.mobile?.errors?.required">必須輸入電話(huà)</p>
</div>

在這里，我們沒(méi)有獲取對(duì)mobile的模板引用，而是用ngForm的引用獲得：

userForm.controls.mobile?.pristine

當(dāng)獲取驗(yàn)證錯(cuò)誤結(jié)果時(shí):

userForm.controls.mobile?.errors?.minlength

注意這里在mobile上就使用?是因?yàn)?，在使用ngIf渲染頁(yè)面上的元素的時(shí)候，這個(gè)表單控件還沒(méi)有初始化完成，如果不加這個(gè)?，就會(huì)出現(xiàn)錯(cuò)誤。

根據(jù)驗(yàn)證狀態(tài)定義樣式

Angular的表單驗(yàn)證，除了在控件上的數(shù)據(jù)以外，它還會(huì)根據(jù)狀態(tài)在控件所在的html元素上添加css樣式：

所以，我們只需要定義相關(guān)的css，就可以實(shí)現(xiàn)根據(jù)狀態(tài)顯示不同的效果。

.ng-valid[required], .ng-valid.required {
 border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form).ng-invalid:not(fieldset) {
 border-left: 5px solid #a94442; /* red */
}

結(jié)合各種css的選擇器，我們就可以根據(jù)表單控件的狀態(tài)實(shí)現(xiàn)各種顯示的樣式。

在組件中獲取表單控件數(shù)據(jù)

最后，我們?cè)倏纯丛鯓釉诮M件中獲取這些控件的狀態(tài)和結(jié)果，在上面，我們給ngForm添加了一個(gè)提交方法:

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate>

然后在組件中，這個(gè)logForm(userForm)方法如下：

logForm(theForm: NgForm) {
  if (theForm.invalid) {
    if (theForm.controls['name'].errors) {
      this.nameErrorMsg = 'name error:' + JSON.stringify(theForm.controls['name'].errors);
    } else {
      this.nameErrorMsg = null;
    }
  }
  console.log(theForm.value);
}

在這個(gè)方法里，theForm就是ngForm的模板引用實(shí)例，類(lèi)型是NgForm的。

如果表單驗(yàn)證有失敗，theForm.invalid就是false。

theForm.controls就是這個(gè)表單里的所有控件，如果想獲取姓名的驗(yàn)證結(jié)果，就是theForm.controls['name'].errors。

用這種方式，我們就可以在組件中獲取所有表單控件的數(shù)據(jù)、驗(yàn)證狀態(tài)、錯(cuò)誤信息等。

重置表單

一般情況下，如果是新建用戶(hù)信息，我們需要在保存成功以后，清空當(dāng)前數(shù)據(jù)，重置表單的狀態(tài)，等待用戶(hù)重新輸入。如果我們只是清空數(shù)據(jù)，這時(shí)候那些驗(yàn)證錯(cuò)誤就會(huì)被檢測(cè)到，我們我們需要將表單控件也都重置成未修改狀態(tài)。這在A(yíng)ngular2里很簡(jiǎn)單，它提供了一個(gè)reset方法。

我們?cè)诶锩嫣砑右粋€(gè)重置按鈕：

<button (click)="reset(userForm)">重置</button>

然后在組件里：

reset(theForm: NgForm) {
  theForm.reset();
  return false;
}

注意我們需要讓這個(gè)方法返回false，這樣他就不會(huì)觸發(fā)submit的方法。

在官方的文檔中，還提供了另一種技巧來(lái)實(shí)現(xiàn)這種重置，就是在form上使用ngIf：

<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate *ngIf="active">

只有在active為true時(shí)這個(gè)表單才會(huì)創(chuàng)建。

然后在重置的時(shí)候，設(shè)置這個(gè)active為false，這樣這個(gè)表單就會(huì)被銷(xiāo)毀，然后用setTimeout的方式再設(shè)置它為true，這個(gè)表單就會(huì)重新創(chuàng)建，這樣就實(shí)現(xiàn)了重置的效果。

reset() {
  this.user = { // 重置用戶(hù)數(shù)據(jù)
    address: {}
  };
  this.active = false;
  setTimeout(() => this.active = true, 0);
  return false;
}

這也是一種小竅門(mén)，可以在某些情況下使用。

總結(jié)

至此，有關(guān)模板驅(qū)動(dòng)的表單的基本用法大致完成，再總結(jié)一下模板驅(qū)動(dòng)的表單的基本特性：

1. 所有的表單控件的定義都在模板里
2. 所有的驗(yàn)證器都在模板里面添加
3. 表單數(shù)據(jù)的狀態(tài)、驗(yàn)證結(jié)果都在模板上通過(guò)判斷表單里面控件數(shù)據(jù)的狀態(tài)來(lái)顯示
4. 如果需要測(cè)試這部分的代碼，需要使用e2e（端到端）測(cè)試，也就是在瀏覽器里面

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論