Angular 響應(yīng)式表單

注冊響應(yīng)式表單模塊

要使用響應(yīng)式表單控件，就要從 @angular/forms 包中導(dǎo)入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports 數(shù)組中。

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

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

生成新的 FormControl

使用 CLI 命令 ng generate 在項(xiàng)目中生成一個(gè)組件作為該表單控件的宿主。

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

在模板中注冊該控件

<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">

顯示該組件

把該組件添加到模板時(shí)，將顯示指派給 ?name ?的表單控件。

<app-name-editor></app-name-editor>

表單分組

定義了一個(gè)帶有一組控件的表單，你可以把它們放在一起管理。表單組的基礎(chǔ)知識將在本節(jié)中討論。你也可以通過嵌套表單組來創(chuàng)建更復(fù)雜的表單。

表單數(shù)組

定義了一個(gè)動態(tài)表單，你可以在運(yùn)行時(shí)添加和刪除控件。你也可以通過嵌套表單數(shù)組來創(chuàng)建更復(fù)雜的表單。

創(chuàng)建一個(gè) FormGroup 實(shí)例。

在組件類中創(chuàng)建一個(gè)名叫 ?profileForm ?的屬性，并設(shè)置為 ?FormGroup ?的一個(gè)新實(shí)例。要初始化這個(gè) ?FormGroup?，請為構(gòu)造函數(shù)提供一個(gè)由控件組成的對象，對象中的每個(gè)名字都要和表單控件的名字一一對應(yīng)。

對此個(gè)人檔案表單，要添加兩個(gè) ?FormControl ?實(shí)例，名字分別為 ?firstName ?和 ?lastName?。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

這些獨(dú)立的表單控件被收集到了一個(gè)控件組中。這個(gè) ?FormGroup ?用對象的形式提供了它的模型值，這個(gè)值來自組中每個(gè)控件的值。?FormGroup ?實(shí)例擁有和 ?FormControl ?實(shí)例相同的屬性（比如 ?value?、?untouched?）和方法（比如 ?setValue()?）。

把這個(gè) FormGroup 模型關(guān)聯(lián)到視圖。

這個(gè)表單組還能跟蹤其中每個(gè)控件的狀態(tài)及其變化，所以如果其中的某個(gè)控件的狀態(tài)或值變化了，父控件也會發(fā)出一次新的狀態(tài)變更或值變更事件。該控件組的模型來自它的所有成員。在定義了這個(gè)模型之后，你必須更新模板，來把該模型反映到視圖中。

<form [formGroup]="profileForm">

  <label for="first-name">First Name: </label>
  <input id="first-name" type="text" formControlName="firstName">

  <label for="last-name">Last Name: </label>
  <input id="last-name" type="text" formControlName="lastName">

</form>

NOTE:
就像 ?FormGroup ?所包含的那控件一樣，profileForm 這個(gè) ?FormGroup ?也通過 ?FormGroup ?指令綁定到了 ?form ?元素，在該模型和表單中的輸入框之間創(chuàng)建了一個(gè)通訊層。

由 ?FormControlName ?指令提供的 ?formControlName ?屬性把每個(gè)輸入框和 ?FormGroup ?中定義的表單控件綁定起來。這些表單控件會和相應(yīng)的元素通訊，它們還把更改傳給 ?FormGroup?，這個(gè) ?FormGroup ?是模型值的事實(shí)之源。

保存表單數(shù)據(jù)

?ProfileEditor ?組件從用戶那里獲得輸入，但在真實(shí)的場景中，你可能想要先捕獲表單的值，等將來在組件外部進(jìn)行處理。?FormGroup ?指令會監(jiān)聽 ?form ?元素發(fā)出的 ?submit ?事件，并發(fā)出一個(gè) ?ngSubmit ?事件，讓你可以綁定一個(gè)回調(diào)函數(shù)。把 ?onSubmit()? 回調(diào)方法添加為 ?form ?標(biāo)簽上的 ?ngSubmit ?事件監(jiān)聽器。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

?ProfileEditor ?組件上的 ?onSubmit()? 方法會捕獲 ?profileForm ?的當(dāng)前值。要保持該表單的封裝性，就要使用 ?EventEmitter ?向組件外部提供該表單的值。下面的例子會使用 ?console.warn? 把這個(gè)值記錄到瀏覽器的控制臺中。

onSubmit() {
  // TODO: Use EventEmitter with form value
  console.warn(this.profileForm.value);
}

?form ?標(biāo)簽所發(fā)出的 ?submit ?事件是內(nèi)置 DOM 事件，通過點(diǎn)擊類型為 ?submit ?的按鈕可以觸發(fā)本事件。這還讓用戶可以用回車鍵來提交填完的表單。往表單的底部添加一個(gè) ?button?，用于觸發(fā)表單提交。

<p>Complete the form to enable button.</p>
<button type="submit" [disabled]="!profileForm.valid">Submit</button>

注意：
上面這個(gè)代碼片段中的按鈕還附加了一個(gè) ?disabled ?綁定，用于在 ?profileForm ?無效時(shí)禁用該按鈕。目前你還沒有執(zhí)行任何表單驗(yàn)證邏輯，因此該按鈕始終是可用的。

顯示此組件

要顯示包含此表單的 ?ProfileEditor ?組件，請把它添加到組件模板中。

<app-profile-editor></app-profile-editor>

?ProfileEditor ?讓你能管理 ?FormGroup ?中的 ?firstName ?和 ?lastName ?等 ?FormControl ?實(shí)例。

創(chuàng)建一個(gè)嵌套的表單組。

要在 profileForm 中創(chuàng)建一個(gè)嵌套組，就要把一個(gè)嵌套的 address 元素添加到此表單組的實(shí)例中。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
}

在這個(gè)例子中，?address group? 把現(xiàn)有的 ?firstName?、?lastName ?控件和新的 ?street?、?city?、?state ?和 ?zip ?控件組合在一起。雖然 ?address ?這個(gè) ?FormGroup ?是 ?profileForm ?這個(gè)整體 ?FormGroup ?的一個(gè)子控件，但是仍然適用同樣的值和狀態(tài)的變更規(guī)則。來自內(nèi)嵌控件組的狀態(tài)和值的變更將會冒泡到它的父控件組，以維護(hù)整體模型的一致性。

在模板中對這個(gè)嵌套表單分組。

<div formGroupName="address">
  <h2>Address</h2>

  <label for="street">Street: </label>
  <input id="street" type="text" formControlName="street">

  <label for="city">City: </label>
  <input id="city" type="text" formControlName="city">

  <label for="state">State: </label>
  <input id="state" type="text" formControlName="state">

  <label for="zip">Zip Code: </label>
  <input id="zip" type="text" formControlName="zip">
</div>

提示：
這里使用了 ?value ?屬性和 ?JsonPipe ?管道在組件模板中顯示了這個(gè) ?FormGroup ?的值。

使用 setValue() 方法來為單個(gè)控件設(shè)置新值。setValue() 方法會嚴(yán)格遵循表單組的結(jié)構(gòu)，并整體性替換控件的值。

使用 patchValue() 方法可以用對象中所定義的任何屬性為表單模型進(jìn)行替換。

導(dǎo)入 FormBuilder 類

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

注入 FormBuilder 服務(wù)

?FormBuilder ?是一個(gè)可注入的服務(wù)提供者，它是由 ?ReactiveFormModule ?提供的。只要把它添加到組件的構(gòu)造函數(shù)中就可以注入這個(gè)依賴。

constructor(private fb: FormBuilder) { }

生成表單控件

?FormBuilder ?服務(wù)有三個(gè)方法：?control()?、?group()? 和 ?array()?。這些方法都是工廠方法，用于在組件類中分別生成 ?FormControl?、?FormGroup ?和 ?FormArray?。

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

  constructor(private fb: FormBuilder) { }
}

在上面的例子中，你可以使用 ?group()? 方法，用和前面一樣的名字來定義這些屬性。這里，每個(gè)控件名對應(yīng)的值都是一個(gè)數(shù)組，這個(gè)數(shù)組中的第一項(xiàng)是其初始值。

提示：
你可以只使用初始值來定義控件，但是如果你的控件還需要同步或異步驗(yàn)證器，那就在這個(gè)數(shù)組中的第二項(xiàng)和第三項(xiàng)提供同步和異步驗(yàn)證器。

比較一下用表單構(gòu)建器和手動創(chuàng)建實(shí)例這兩種方式。

• src/app/profile-editor/profile-editor.component.ts (instances)

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});

• src/app/profile-editor/profile-editor.component.ts (form builder)

  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });

導(dǎo)入驗(yàn)證器函數(shù)

響應(yīng)式表單包含了一組開箱即用的常用驗(yàn)證器函數(shù)。這些函數(shù)接收一個(gè)控件，用以驗(yàn)證并根據(jù)驗(yàn)證結(jié)果返回一個(gè)錯誤對象或空值。

從 ?@angular/forms? 包中導(dǎo)入 ?Validators ?類。

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

建一個(gè)必填字段

在 ?ProfileEditor ?組件中，把靜態(tài)方法 ?Validators.required? 設(shè)置為 ?firstName ?控件值數(shù)組中的第二項(xiàng)。

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
});

顯示表單狀態(tài)

<p>Form Status: {{ profileForm.status }}</p>

導(dǎo)入 ??FormArray?? 類

從 ?@angular/form? 中導(dǎo)入 ?FormArray?，以使用它的類型信息。?FormBuilder ?服務(wù)用于創(chuàng)建 ?FormArray ?實(shí)例。

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

定義 FormArray 控件

你可以通過把一組（從零項(xiàng)到多項(xiàng)）控件定義在一個(gè)數(shù)組中來初始化一個(gè) ?FormArray?。為 ?profileForm ?添加一個(gè) ?aliases ?屬性，把它定義為 ?FormArray ?類型。

使用 ?FormBuilder.array()? 方法來定義該數(shù)組，并用 ?FormBuilder.control()? 方法來往該數(shù)組中添加一個(gè)初始控件。

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
  aliases: this.fb.array([
    this.fb.control('')
  ])
});

FormGroup ?中的這個(gè) ?aliases ?控件現(xiàn)在管理著一個(gè)控件，將來還可以動態(tài)添加多個(gè)。

訪問 FormArray 控件

get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}

注意：
因?yàn)榉祷氐目丶念愋褪?nbsp;?AbstractControl?，所以你要為該方法提供一個(gè)顯式的類型聲明來訪問 ?FormArray ?特有的語法。

addAlias() {
  this.aliases.push(this.fb.control(''));
}

在模板中顯示表單數(shù)組

<div formArrayName="aliases">
  <h2>Aliases</h2>
  <button type="button" (click)="addAlias()">+ Add another alias</button>

  <div *ngFor="let alias of aliases.controls; let i=index">
    <!-- The repeated alias template -->
    <label for="alias-{{ i }}">Alias:</label>
    <input id="alias-{{ i }}" type="text" [formControlName]="i">
  </div>
</div>

添加一個(gè)別名

最初，表單只包含一個(gè)綽號字段，點(diǎn)擊 ?Add Alias? 按鈕，就出現(xiàn)了另一個(gè)字段。你還可以驗(yàn)證由模板底部的“Form Value”顯示出來的表單模型所報(bào)告的這個(gè)綽號數(shù)組。

注意：
除了為每個(gè)綽號使用 ?FormControl ?之外，你還可以改用 ?FormGroup ?來組合上一些額外字段。對其中的每個(gè)條目定義控件的過程和前面沒有區(qū)別。

所有三種表單控件類（FormControl、FormGroup 和 FormArray）的抽象基類。它提供了一些公共的行為和屬性。

管理單體表單控件的值和有效性狀態(tài)。它對應(yīng)于 HTML 的表單控件，比如 <input> 或 <select>。

管理一組 AbstractControl 實(shí)例的值和有效性狀態(tài)。該組的屬性中包括了它的子控件。組件中的頂層表單就是 FormGroup。

管理一些 AbstractControl 實(shí)例數(shù)組的值和有效性狀態(tài)。

一個(gè)可注入的服務(wù)，提供一些用于提供創(chuàng)建控件實(shí)例的工廠方法。

把一個(gè)獨(dú)立的 FormControl 實(shí)例綁定到表單控件元素。

把一個(gè)現(xiàn)有 FormGroup 中的 FormControl 實(shí)例根據(jù)名字綁定到表單控件元素。

把一個(gè)現(xiàn)有的 FormGroup 實(shí)例綁定到 DOM 元素。

把一個(gè)內(nèi)嵌的 FormGroup 實(shí)例綁定到一個(gè) DOM 元素。

把一個(gè)內(nèi)嵌的 FormArray 實(shí)例綁定到一個(gè) DOM 元素。