最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

注冊(cè)響應(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('');
}

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

在模板中注冊(cè)該控件

Name: 

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

顯示該組件

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

表單分組

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

表單數(shù)組

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

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

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

對(duì)此個(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 ?用對(duì)象的形式提供了它的模型值，這個(gè)值來自組中每個(gè)控件的值。?FormGroup ?實(shí)例擁有和 ?FormControl ?實(shí)例相同的屬性（比如 ?value?、?untouched?）和方法（比如 ?setValue()?）。

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

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

  First Name: 
  

  Last Name: 
  

NOTE:

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

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

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

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

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

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ā)表單提交。

Complete the form to enable button.
Submit

注意：

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

顯示此組件

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

?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)和值的變更將會(huì)冒泡到它的父控件組，以維護(hù)整體模型的一致性。

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

  
Address

  Street: 
  

  City: 
  

  State: 
  

  Zip Code: 
  

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

提示：

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

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

使用 patchValue() 方法可以用對(duì)象中所定義的任何屬性為表單模型進(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è)控件名對(duì)應(yīng)的值都是一個(gè)數(shù)組，這個(gè)數(shù)組中的第一項(xiàng)是其初始值。

提示：

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

比較一下用表單構(gòu)建器和手動(dòng)創(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è)錯(cuò)誤對(duì)象或空值。

從 ?@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)

Form Status: {{ profileForm.status }}

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

導(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è)控件，將來還可以動(dòng)態(tài)添加多個(gè)。

訪問 FormArray 控件

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

注意：

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

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

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

在這個(gè)模板中，這些控件會(huì)被迭代，把每個(gè)控件都顯示為一個(gè)獨(dú)立的輸入框。

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

添加一個(gè)別名

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

注意：

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

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

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

管理一組 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 元素。