Angular.js 4.x中表單Template-Driven Forms詳解

發(fā)布時間：2020-09-26 01:52:15 來源：腳本之家閱讀：186 作者：semlinker 欄目：web開發(fā)

Angular 4.x 中有兩種表單：

Template-Driven Forms - 模板驅動式表單 (類似于 Angular 1.x 中的表單 )
Reactive Forms - 響應式表單

本文主要介紹 Template-Driven Forms (模板驅動式表單) ，將涉及 ngForm、ngModel、ngModelGroup、表單提交事件、表單驗證和異常信息輸出等內容。

Contents

ngModule and template-driven forms
Binding ngForm and ngModel
ngModel,[ngModel] and [(ngModel)]
ngModels and ngModelGroup
Template-driven submit
Template-driven error validation

Form base and interface

Form base

<form novalidate>
 <label>
 <span>Full name</span>
 <input
 type="text"
 name="name"
 placeholder="Your full name">
 </label>
 <div>
 <label>
 <span>Email address</span>
 <input
 type="email"
 name="email"
 placeholder="Your email address">
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 name="confirm"
 placeholder="Confirm your email address">
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

接下來我們要實現(xiàn)的功能如下：

綁定 name、email、confirm 輸入框的值
為所有輸入框添加表單驗證功能
顯示驗證異常信息
表單驗證失敗時，不允許進行表單提交
表單提交功能

User interface

// signup.interface.ts
export interface User {
 name: string;
 account: {
 email: string;
 confirm: string;
 }
}

ngModule and template-driven forms

在我們繼續(xù)深入介紹 template-driven 表單前，我們必須在 @NgModule 中導入 @angular/forms 庫中的 FormModule：

import { FormsModule } from '@angular/forms';

@NgModule({
 imports: [
 ...,
 FormsModule
 ],
 declarations: [...],
 bootstrap: [...]
})
export class AppModule {}

友情提示：若使用 template-driven 表單，則導入 FormsModule；若使用 reactive forms，則導入 ReactiveFormsModule。

Template-driven approach

使用模板驅動的表單，我們基本上可以將組件類留空，直到我們需要讀取/寫入值 (例如提交和設置初始值)。我們將基于上面的定義的基礎表單，創(chuàng)建 SignupFormComponent ：

signup-form.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'signup-form',
 template: `
 <form novalidate>...</form>
 `
})
export class SignupFormComponent {
 constructor() {}
}

這是一個很基礎的組件，接下來我們導入之前定義的 User 接口，具體如下：

import { User } from './signup.interface';

@Component({...})
export class SignupFormComponent {
 public user: User = {
 name: '',
 account: {
 email: '',
 confirm: ''
 }
 };
}

初始化 SignupFormComponent 組件類中的用戶模型后，我們開始實現(xiàn)第一個功能點：即綁定 name、email、confirm 輸入框的值。

Binding ngForm and ngModel

我們從 ngForm 開始，更新后的模板如下：

<form novalidate #f="ngForm">
 <label>
 <span>Full name</span>
 <input type="text" placeholder="Your full name">
 </label>
</form>

上面代碼中，我們把 ngForm 的值賦值給 #f 變量，通過該變量我們可以方便的獲取表單的值。

友情提示： #f 變量的值，是 ngForm 指令的導出對象。

@Directive({
 selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
 providers: [formDirectiveProvider],
 host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
 outputs: ['ngSubmit'],
 exportAs: 'ngForm'
})
export class NgForm extends ControlContainer implements Form {}

在模板中，我們可以通過以下方式查看表單的值：

{{ f.value | json }} // {}

上面示例 f.value 輸出 {}，因為此時我們表單中還未綁定任何值。在 Angular 1.x 中我們可以使用 ng-model 指令進行表單數(shù)據的雙向綁定，接下來我們來看一下 Angular 4.x 中怎么實現(xiàn)數(shù)據綁定。

ngModel,[ngModel] and [(ngModel)]

在 Angular 4.x 中 ngModel 有三種不同的語法：

1、ngModel - 直接使用 ngModel 指令，沒有使用綁定或關聯(lián)任何值。

此時，ngModel 將自動關聯(lián)表單控件的 name 屬性，并使用該值作為 ngForm 對象的屬性名。

<form novalidate #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 ngModel>
 ...
</form>

友情提示：上面示例中，如果 input 輸入框若未設置 name 屬性，應用將會拋出異常。ngModel 指令基于輸入框的 name 屬性，進行綁定。

運行以上代碼，f.value 的輸入值如下：

{{ f.value | json }} // { name: '' }

非常好，我們已經綁定了 name 輸入框的值。但我們應該怎么為輸入框設置初始值？

2、[ngModel] = one-way binding syntax (單向綁定語法)

為了設置輸入框初始值，我們先要更新一下 SignupFormComponent 組件類的用戶模型：

...
user: User = {
 name: 'Semlinker',
 account: {
 email: '',
 confirm: ''
 }
};
...

更新完用戶模型，我們需要同步更新組件模板，具體如下：

<form #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 [ngModel]="user.name">
 ...
</form>

代碼重新運行后，f.value 的輸出如下：

{{ f.value | json }} // { name: 'Semlinker' }

從上面示例可以看出，使用 [ngModel] 允許我們通過 this.user.name 設置 name 輸入框的初始值，而且該值會自動綁定到 f.value 對象上。

友情提示： [ngModel] 是單向綁定，當表單中 name 輸入框的值改變時，不會同步更新 this.user.name

如果想在 name 輸入框值變化時，自動同步更新 this.user.name 的值，我們需要使用雙向綁定。

3、[(ngModel)] = two-way binding syntax (雙向綁定)，具體示例如下：

<form #f="ngForm">
 ...
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 [(ngModel)]="user.name">
 ...
</form>

上面示例成功運行后，我們可以在模板中新增以下代碼，然后觀察 user 模型的值：

{{ user | json }} // { name: 'Semlinker' }

需要注意的是：以下兩種方式是等價的：

<input [(ngModel)]="user.name">
<input [ngModel]="user.name" (ngModelChange)="user.name = $event">

其中 [(ngModel)] 是簡寫的語法糖。

ngModels and ngModelGroup

我們已經介紹了 ngForm 和 ngModel 的基礎用法，現(xiàn)在我們來完善剩下的內容。SignupFormComponent 組件類的用戶模型中，包含了一個嵌套屬性 account ，account 對象中包含 email 和 confirm 屬性，分為表示郵件地址和重復確認的郵件地址。針對這種場景，Angular 4.x 為我們提供了 ngModelGroup 指令，具體示例如下：

<form novalidate #f="ngForm">
 <label>
 <span>Full name</span>
 <input
 type="text"
 placeholder="Your full name"
 name="name"
 ngModel>
 </label>
 <div ngModelGroup="account">
 <label>
 <span>Email address</span>
 <input
 type="email"
 placeholder="Your email address"
 name="email"
 ngModel>
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 placeholder="Confirm your email address"
 name="confirm"
 ngModel>
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

使用 ngModelGroup 指令后，我們的 DOM 結構將更加合理：

ngForm -> '#f'
 ngModel -> 'name'
 ngModelGroup -> 'account'
   -> ngModel -> 'email'
   -> ngModel -> 'confirm'

以上代碼成功運行后，瀏覽器中頁面顯示的結果：

// { name: 'Semlinker', account: { email: '', confirm: '' } }
{{ f.value | json }}

此時我們已經完成了表單數(shù)據綁定，接下來我們來為表單增加提交邏輯。

Template-driven submit

Angular 表單中提供了 ngSubmit 輸出屬性，用于監(jiān)聽表單的提交事件：

<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
 ...
</form>

當用戶提交表單時，我們將會把 f 作為參數(shù)，調用 ngSubmit 關聯(lián)的 onSubmit() 方法。onSubmit() 方法的具體實現(xiàn)如下：

export class SignupFormComponent {
 user: User = {...};
 onSubmit({ value, valid }: { value: User, valid: boolean }) {
 console.log(value, valid);
 }
}

上面代碼中，我們使用 Object destructuring (對象解構) 的方式，從#f 引用對象中獲取 value 和 valid 屬性的值。其中 value 的值，就是 f.value 的值。表單的數(shù)據綁定方式和提交邏輯已經介紹完了，是該介紹表單實際應用中，一個重要的環(huán)節(jié) — 表單驗證。

Template-driven error validation

在為表單項添加驗證規(guī)則前，我們先來更新一下 SignupFormComponent 組件中的 Sign up 按鈕，確保在表單驗證不通過時，不允許用戶執(zhí)行表單提交操作。

更新后的代碼如下：

<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">
 ...
 <button type="submit" [disabled]="f.invalid">Sign up</button>
</form>

以上代碼我們通過 f.invalid 獲取表單當前的驗證狀態(tài) (驗證不通過時該值為true)，來控制按鈕的 disabled 屬性。

接下來開始進入正題，為表單添加驗證規(guī)則：

<form novalidate #f="ngForm">
 <label>
 ...
 <input
 ...
 ngModel
 required>
 </label>
 <div ngModelGroup="account">
 <label>
 ...
 <input
 ...
 name="email"
 ngModel
 required>
 </label>
 <label>
 ...
 <input
 ...
 name="confirm"
 ngModel
 required>
 </label>
 </div>
 <button type="submit">Sign up</button>
</form>

上面代碼中，我們?yōu)槊總€ input 表單控件，添加了 required (必填項) 的驗證規(guī)則。一切都那么簡單，剩下的問題就是如何獲取驗證失敗的異常消息。

皇上，您還記得當年大明湖畔的夏雨荷嗎？ — No，No，No ！我只記得安谷拉 (angular) 湖畔的美女 (f)。

#f 引用對象中有一個 controls 屬性，通過該屬性，我們就可以獲取表單控件的驗證信息，下面示例演示了如何獲取 name 表單控件驗證的異常信息：

<form novalidate #f="ngForm">
 {{ f.controls.name?.errors | json }}
</form>

f.controls.name?.errors 的值是 null 或 undefined 時，表示驗證成功。

友情提示： ?.prop 稱為安全導航操作符，用于告訴 Angular prop 的值可能不存在。

接下來為我們的 name 表單控件，添加顯示異常信息的代碼：

<div *ngIf="f.controls.name?.required" class="error">
 Name is required
</div>

雖然我們已經可以獲取某個表單項的驗證信息，但有沒有覺得使用 f.controls.name?.errors 這種方式，太麻煩了。那么有沒有更簡單的方式呢？我的答案是 - Yes ！廢話不多說，馬上看示例：

<label>
 ...
 <input
 ...
 #userName="ngModel"
 required>
</label>
<div *ngIf="userName.errors?.required" class="error">
 Name is required
</div>

(備注：此處一定要使用 #userName="ngModel")

以上代碼成功運行后，我們在瀏覽器中看到了異常信息，為了避免一開始就顯示異常信息，我們可以更新一下 *ngIf 表達式的驗證邏輯：

<div *ngIf="userName.errors?.required && userName.touched" 
 class="error">
 Name is required
</div>

除了使用 required 驗證規(guī)則之外，我們還可以使用 minlength (最小長度)、maxlength (最大長度) 等驗證規(guī)則，下面我們繼續(xù)來完善 SignupFormComponent 組件的功能，即為其它的表單控件添加顯示異常信息的功能：

<!-- name -->
<div *ngIf="userName.errors?.required && userName.touched" 
 class="error">
 Name is required
</div>
<div *ngIf="userName.errors?.minlength && userName.touched" 
 class="error">
 Minimum of 2 characters
</div>

<!-- account: { email, confirm } -->
<div *ngIf="userEmail.errors?.required && userEmail.touched" 
 class="error">
 Email is required
</div>
<div *ngIf="userConfirm.errors?.required && userConfirm.touched" 
 class="error">
 Confirming email is required
</div>

我們通過使用模板變量的方式，為 account 表單組添加了顯示驗證異常信息的功能。但有沒有其它更好的方式呢？有沒有辦法去掉 userEmail 和 userConfirm 引用對象呢？答案是肯定的，具體示例如下：

<div ngModelGroup="account" #userAccount="ngModelGroup">
 <label>
 <span>Email address</span>
 <input
 type="email"
 placeholder="Your email address"
 name="email"
 ngModel
 required>
 </label>
 <label>
 <span>Confirm address</span>
 <input
 type="email"
 placeholder="Confirm your email address"
 name="confirm"
 ngModel
 required>
 </label>
 <div *ngIf="userAccount.invalid && userAccount.touched" class="error">
 Both emails are required
 </div>
</div>

(備注：記得移除模板上的 #userEmail 和 #userConfirm 引用哈)

我有話說

表單控件的狀態(tài)除了 touched 外，還包含其它幾種狀態(tài)？

表單控件有以下 6 種狀態(tài)，我們可以通過 #userName="ngModel" 方式獲取對應的狀態(tài)值。

具體狀態(tài)如下：

valid - 表單控件有效
invalid - 表單控件無效
pristine - 表單控件值未改變
dirty - 表單控件值已改變
touched - 表單控件已被訪問過
untouched - 表單控件未被訪問過

表單控件上 #userName 和 #userName="ngModel" 這兩種方式有什么區(qū)別？

#userName - 指向 input 表單控件
#userName="ngModel" - 指向 NgModel 實例

ngModel 指令

// angular2/packages/forms/src/directives/ng_model.ts 片段
@Directive({
 selector: '[ngModel]:not([formControlName]):not([formControl])',
 providers: [formControlBinding],
 exportAs: 'ngModel' // // 導出指令實例，使得可以在模板中調用
})
export class NgModel extends NgControl implements OnChanges, OnDestroy {
}

NgControl 抽象類

// angular2/packages/forms/src/directives/ng_control.ts 片段
export abstract class NgControl extends AbstractControlDirective {
 /** @internal */
 _parent: ControlContainer = null;
 name: string = null;
 valueAccessor: ControlValueAccessor = null;
 ...
 abstract viewToModelUpdate(newValue: any): void;
}

AbstractControlDirective 抽象類

// angular2/packages/forms/src/directives/abstract_control_directive.ts 片段
export abstract class AbstractControlDirective {
 get valid(): boolean { return this.control ? this.control.valid : null; }

 get invalid(): boolean { return this.control ? this.control.invalid : null; }

 get errors(): ValidationErrors | null { return this.control ? 
 this.control.errors : null; }

 get pristine(): boolean { return this.control ? this.control.pristine : null; }

 get dirty(): boolean { return this.control ? this.control.dirty : null; }

 get touched(): boolean { return this.control ? this.control.touched : null; }

 get untouched(): boolean { return this.control ? this.control.untouched : null; }

 get valueChanges(): Observable<any> { return this.control ? 
 this.control.valueChanges : null; }

 hasError(errorCode: string, path: string[] = null): boolean {
 return this.control ? this.control.hasError(errorCode, path) : false;
 }

 getError(errorCode: string, path: string[] = null): any {
 return this.control ? this.control.getError(errorCode, path) : null;
 }
}

ngModelGroup 有什么作用？

ngModelGroup 指令是 Angular 提供的另一特殊指令，可以對表單輸入內容進行分組，方便我們在語義上區(qū)分不同性質的輸入。例如聯(lián)系人的信息包括姓名及住址，現(xiàn)在需對姓名和住址進行精細化信息收集，姓名可精細化成姓和名字，地址可精細化成城市、區(qū)、街等。此時就可以將姓名及住址進行分組收集，具體如下:

<form #concatForm = "ngForm">
 <fieldset ngModelGroup="nameGroup" #nameGroup="ngModelGroup">
 <label>姓:</label>
 <input type="text" name="firstname" [(ngModel)]="curContact.firstname" 
  required> 
  <label>名字:</label>
 <input type="text" name="lastname" [(ngModel)]="curContact.lastname" 
  required>
 </fieldset>
 <fieldset ngModelGroup="addressGroup" #addressGroup ="ngModelGroup">
 <label>街:</label>
 <input type="text" name="street" [(ngModel)]="curContact.street" required>  <label>區(qū):</label>
 <input type="text" name="zip" [(ngModel)]="curContact.zip" required> 
 <label>城市:</label>
 <input type="text" name="city" [(ngModel)]="curContact.city" required>
 </fieldset>
</form>

上述例子分別對聯(lián)系人的姓名和住址進行分組， ngModelGroup 將姓和名字的表單內容進行包裹組成姓名分組，將城市、區(qū)和街道的表單內容進行包裹組成住址分組。此時concatForm.value值為:

{
 nameGroup: {
 firstname: ''，
 lastname: ''，
 }，
 addressGroup: { 
 street: ''， 
 zip: ''， 
 city: ''
 } 
}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

Angular.js 4.x中表單Template-Driven Forms詳解

猜你喜歡

最新資訊

相關推薦

相關標簽