日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

注冊響應(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 在項目中生成一個組件作為該表單控件的宿主。

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('');
}

可以用 ?FormControl ?的構(gòu)造函數(shù)設(shè)置初始值，這個例子中它是空字符串。通過在你的組件類中創(chuàng)建這些控件，你可以直接對表單控件的狀態(tài)進(jìn)行監(jiān)聽、修改和校驗。

在模板中注冊該控件

Name: 

使用這種模板綁定語法，把該表單控件注冊給了模板中名為 ?name ?的輸入元素。這樣，表單控件和 DOM 元素就可以互相通訊了：視圖會反映模型的變化，模型也會反映視圖中的變化。

顯示該組件

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

表單分組

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

表單數(shù)組

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

創(chuàng)建一個 FormGroup 實例。

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

對此個人檔案表單，要添加兩個 ?FormControl ?實例，名字分別為 ?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(''),
  });
}

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

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

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

  First Name: 
  

  Last Name: 
  

NOTE:

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

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

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

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

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

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

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

Complete the form to enable button.
Submit

注意：

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

顯示此組件

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

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

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

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

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('')
    })
  });
}

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

在模板中對這個嵌套表單分組。

  
Address

  Street: 
  

  City: 
  

  State: 
  

  Zip Code: 
  

?ProfileEditor ?表單顯示為一個組，但是將來這個模型會被進(jìn)一步細(xì)分，以表示邏輯分組區(qū)域。

提示：

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

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

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

導(dǎo)入 FormBuilder 類

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

注入 FormBuilder 服務(wù)

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

constructor(private fb: FormBuilder) { }

生成表單控件

?FormBuilder ?服務(wù)有三個方法：?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()? 方法，用和前面一樣的名字來定義這些屬性。這里，每個控件名對應(yīng)的值都是一個數(shù)組，這個數(shù)組中的第一項是其初始值。

提示：

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

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

• 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)入驗證器函數(shù)

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

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

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

建一個必填字段

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

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

顯示表單狀態(tài)

Form Status: {{ profileForm.status }}

提交按鈕被禁用了，因為 ?firstName ?控件的必填項規(guī)則導(dǎo)致了 ?profileForm ?也是無效的。在你填寫了 ?firstName ?輸入框之后，該表單就變成了有效的，并且提交按鈕也啟用了。

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

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

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

定義 FormArray 控件

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

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

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

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

訪問 FormArray 控件

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

注意：

因為返回的控件的類型是 ?
AbstractControl?，所以你要為該方法提供一個顯式的類型聲明來訪問 ?
FormArray ?特有的語法。

定義一個方法來把一個綽號控件動態(tài)插入到綽號 ?FormArray ?中。用 ?FormArray.push()? 方法把該控件添加為數(shù)組中的新條目。

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

在這個模板中，這些控件會被迭代，把每個控件都顯示為一個獨立的輸入框。

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

添加一個別名

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

注意：

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

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

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

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

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

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

把一個獨立的 FormControl 實例綁定到表單控件元素。

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

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

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

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