欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular中使用嵌套Form的詳細(xì)步驟

 更新時間：2022年04月25日 11:46:28   作者：JerryWang_sap  
Angular響應(yīng)式表單使用顯式的、不可變的方式,管理表單在特定的時間點(diǎn)上的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Angular中使用嵌套Form的詳細(xì)步驟,需要的朋友可以參考下

我們可以在這個 FormGroup 構(gòu)造函數(shù)的屬性里，再增添一個類型為 FormGroup 的實(shí)例，形成嵌套的 form：

每一次顯式調(diào)用 new 創(chuàng)建 FormGroup 和 FormControl 實(shí)例顯得很繁瑣。其實(shí)我們可以使用 FormBuilder 通過工廠模式創(chuàng)建。

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

效果：

冒號后面的參數(shù)類型是 JSON 數(shù)組，第一個參數(shù)為默認(rèn)的初始值，第二個參數(shù)為 validator，使用例子如下：

當(dāng) lastName 沒有維護(hù)值時，整個 form 處于 ng-invalid 狀態(tài)，submit 按鈕無法點(diǎn)擊。

嵌套 group 的 status 狀態(tài)會冒泡到父 form.

可以通過 FormGroup.status 直接訪問其狀態(tài)。

this.profileForm.valueChanges.subscribe(
      value => {
        console.log('group value: ', value, ' status: ', 
        this.profileForm.status);
      }
    );

如果我們事先不知道待創(chuàng)建的 form 控件實(shí)例的準(zhǔn)確數(shù)目，使用動態(tài)控件是一個不錯的選擇。所謂動態(tài)控件，即我們不需要為每一個控件顯式指定 key.

一個實(shí)際例子：

aliases: this.fb.array([
    this.fb.control('')
  ])

創(chuàng)建一個 getter 訪問器，通過代碼的方式獲得上圖創(chuàng)建的動態(tài)控件：

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

因?yàn)?this.profileForm.get('aliases') 返回的控件的類型是抽象數(shù)據(jù)類型 AbstractControl，所以你要為該方法提供一個顯式的類型聲明來訪問 FormArray 特有的語法。

動態(tài)添加匿名組件 的方法：

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

<div formArrayName="aliases">
        <h2>Aliases</h2>
        <button (click)="addAlias()" type="button">+ 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>

最后的效果：

這些匿名控件的值，通過如下方式打印出來：

onSubmit(){
    console.warn(this.profileForm.value);
  }

通過 formArrayName 和 formControlName 給這些匿名控件賦予了索引值，這樣可以通過索引訪問控件中的內(nèi)容：

總結(jié)

到此這篇關(guān)于Angular中使用嵌套Form的文章就介紹到這了,更多相關(guān)Angular使用嵌套Form內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論