部分模型修改

html

Update Profile

js

updateProfile() {
  this.profileForm.patchValue({
  firstName: 'Nancy',
  address: {
   street: '123 Drew Street'
  }
  });
}

patchValue() 方法要針對模型的結(jié)構(gòu)進行更新。patchValue() 只會更新表單模型中所定義的那些屬性。

6：使用 FormBuilder 來生成表單控件

FormBuilder 服務(wù)提供了一些便捷方法來生成表單控件。

FormBuilder在幕后也使用同樣的方式來創(chuàng)建和返回這些實例，只是用起來更簡單。 下面會重構(gòu) ProfileEditor 組件，用FormBuilder 來代替手工創(chuàng)建這些 FormControl 和 FormGroup。

Step 1 - 導(dǎo)入 FormBuilder 類

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

Step 2 - 注入FormBuild 服務(wù)

constructor(private fb: FormBuilder) { }

Step 3- 生成表單控件

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

你可以使用 group() 方法，用和前面一樣的名字來定義這些屬性。這里，每個控件名對應(yīng)的值都是一個數(shù)組，這個數(shù)組中的第一項是其初始值。你可以只使用初始值來定義控件，但是如果你的控件還需要同步或異步驗證器，那就在這個數(shù)組中的第二項和

第三項提供同步和異步驗證器。

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) { }
}

7：簡單的表單驗證

如何把單個驗證器添加到表單控件中，以及如何顯示表單的整體狀態(tài)。

Step 1 - 導(dǎo)入驗證器函數(shù)

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

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

Step 2 - 把字段設(shè)為必填

最常見的校驗項是把一個字段設(shè)為必填項。本節(jié)描述如何為 firstName 控件添加“必填項”驗證器。

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

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

HTML5 有一組內(nèi)置的屬性，用來進行原生驗證，包括 required、minlength、maxlength等。雖然是可選的，不過你也可以在表單的輸入元素上把它們添加為附加屬性來使用它們。這里我們把 required 屬性添加到 firstName輸入元素上。

這些 HTML5 驗證器屬性可以和 Angular響應(yīng)式表單提供的內(nèi)置驗證器組合使用。組合使用這兩種驗證器實踐，可以防止在模板檢查完之后表達式再次被修改導(dǎo)致的錯誤。

8：顯示表單的狀態(tài)

現(xiàn)在，你已經(jīng)往表單控件上添加了一個必填字段，它的初始值是無效的（invalid）。這種無效狀態(tài)冒泡到其父 FormGroup 中，也讓這個 FormGroup 的狀態(tài)變?yōu)闊o效的。你可以通過該 FormGroup 實例的 status 屬性來訪問其當(dāng)前狀態(tài)。

 Form Status: {{ profileForm.status }}

9：使用表單數(shù)組管理動態(tài)控件

FormArray 是 FormGroup 之外的另一個選擇，用于管理任意數(shù)量的匿名控件，如果你事先不知道子控件的數(shù)量，F(xiàn)ormArray是一個很好的選擇

Step 1 - 導(dǎo)入 FormArray

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

Step 2 - 定義 FormArray

為 profileForm 添加一個 aliases 屬性，把它定義為 FormArray 類型。（FormBuilder 服務(wù)用于創(chuàng)建 FormArray 實例。）

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

Step 3 - 訪問FormArray控件

通過 getter 來訪問控件比較便捷，也容易復(fù)用

使用 getter 語法來創(chuàng)建一個名為 aliases 的類屬性

get aliases() {
 
}

從父控件 FormGroup 中接收綽號的 FormArray 控件。

get aliases() {
 return this.profileForm.get('aliases') as FormArray;
}
addAlias() {
 this.aliases.push(this.fb.control(''));
}

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

在模型中定義了 aliases 的 FormArray 之后，你必須把它加入到模板中供用戶輸入，使用 formArrayName 在這個
FormArray 和模板之間建立綁定。

 
Aliases
 Add Alias

 
 
 
  Alias: