本篇內(nèi)容介紹了“Angular中如何使用FormArray和模態(tài)框”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、域名與空間、網(wǎng)頁空間、網(wǎng)絡(luò)營銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

業(yè)務(wù)場(chǎng)景

使用FormArray制作動(dòng)態(tài)表單。每創(chuàng)建一個(gè)表單，頁面就新增一個(gè)input顯示表單填寫的標(biāo)題，點(diǎn)擊編輯再跳轉(zhuǎn)到點(diǎn)擊表單的填寫內(nèi)容。

    // 封裝獲取modelList
    get modelList() {
        return this.formGroup.get('modelList') as FormArray
    }
    constructor(private fb: FormBuilder) {}
    ngOnInit() {
        // 一開始初始化arr為空數(shù)組
        this.formGroup = this.fb.group({
            // 內(nèi)部嵌套FormControl、FormArray、FormGroup
            modelList: this.fb.array([])
        })
    }
    // 模態(tài)框構(gòu)造內(nèi)部的表單
    function newModel() {
        return this.fb.group({
            modelName: [''],
            // 可以繼續(xù)嵌套下去，根據(jù)業(yè)務(wù)需求
        })
    }
    // 省略模態(tài)框部分代碼
    // 傳遞到模態(tài)框的FormArray
    selectedType: FormArray

表單列表

表單詳情【模態(tài)框】

<form [FormGroup]="formGroup">
    <div FormArrayName="modelList">
        <ng-container *nfFor="let item of modelList.controls;let i = index" [FormGroupName]="i">
            <nz-input-group
                [nzSuffix]="suffixIconSearch"
              >
                <input type="text" nz-input formControlName="modelName"/>
              </nz-input-group>
              <ng-template #suffixIconSearch>
                <span
                  nz-icon
                  nzType="edit"
                  class="hover"
                  (click)="showModal(i)"
                ></span>
              </ng-template>
        </ng-container>
    </div>
</form>
<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="Model"
  [nzFooter]="modalFooter"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="selectedType">
      <nz-form-item>
        <nz-form-label nzRequired>Model Test</nz-form-label>
        <nz-form-control>
          <input
            type="text"
            nz-input
            placeholder="請(qǐng)輸入ModelName"
            formControlName="modelName"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <product-config></product-config>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
  <ng-template #modalFooter>
    <button *ngIf="!isNewModel" nzDanger nz-button nzType="default" (click)="handleDelete()">刪除</button>
    <button *ngIf="isNewModel" nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button nzType="primary" (click)="handleOk()">保存</button>
  </ng-template>
</nz-modal>

由于這種模態(tài)框比較特殊，割裂了表單的FormGroup之間的關(guān)系，在點(diǎn)擊的時(shí)候需要傳遞參數(shù)到模態(tài)框顯示部分值，如果單純傳遞參數(shù)使用this.modelList.at(index)獲取實(shí)體到模態(tài)框上進(jìn)行賦值修改，在模態(tài)框點(diǎn)擊保存后會(huì)發(fā)現(xiàn)修改的值沒有在表單更新，而表單上對(duì)input值修改發(fā)現(xiàn)可以影響到模態(tài)框的內(nèi)容。

但是模態(tài)框新增的表單卻可以響應(yīng)到頁面中去。

原錯(cuò)誤代碼思路

• 點(diǎn)擊編輯后，將點(diǎn)擊的FormArray的元素傳遞給一個(gè)臨時(shí)變量 this.selectedType = <FormGroup>this.modelList.at(index);，并且對(duì)模態(tài)框表單傳值。

• 模態(tài)框點(diǎn)擊保存再將原FormArray的值重新替換

this.modelList.removeAt(this.modelIndex)
this.modelList.insert(this.modelIndex, this.selectedType)

---

• 點(diǎn)擊新增，創(chuàng)建一個(gè)新的FormGroup對(duì)象

• 保存添加push到原頁面的FormArray中

newModelType(): FormGroup {
    return this.fb.group({
      modelName: ['', Validators.required],
      configList: this.fb.array([]),
    });
  }
// ...省略
// 模態(tài)框顯示
show() {
    this.isVisible = true
    this.selectedType = this.newModelType();
}
// 保存
save() {
    this.isVisible = false
    // 原頁面FormArray
    this.modelList.push(this.selectedType);
}

最后發(fā)現(xiàn)這種寫法只能夠單向改變，頁面外input修改值會(huì)影響到模態(tài)框，但是模態(tài)框的值改變保存卻讓外部沒有更新。通過console方式查看頁面的FormArray內(nèi)部參數(shù)發(fā)現(xiàn)其實(shí)是有改變的，只是angular沒有檢測(cè)到。這個(gè)時(shí)候判斷沒有發(fā)生響應(yīng)的原因一般是沒有觸發(fā)angular檢測(cè)機(jī)制，仔細(xì)查看文檔發(fā)現(xiàn)有一行很重要 angular文檔在最下面寫著

原本第一次閱讀的時(shí)候，覺得我遵守了這種原則，因?yàn)樵诰庉嫷臅r(shí)候，我選擇了操控原FormArray進(jìn)行元素刪除和插入，是遵循了這種規(guī)則，但是實(shí)際上在模態(tài)框賦值就已經(jīng)違反了這種原則，我在賦值的時(shí)候拿了FormArray的元素實(shí)例賦值給模態(tài)框的臨時(shí)變量，然后更改實(shí)例的值，又重新刪除插入，本質(zhì)上我操作的是同一個(gè)實(shí)例，所以angular沒有檢測(cè)到發(fā)生變化【雖然值發(fā)生改變】

所以正確的做法是啥？？

在賦值的地方不能偷懶，仍然要重新創(chuàng)建新對(duì)象，再拿原對(duì)象的賦值。【相當(dāng)于深拷貝】

      this.selectedType = this.newModelType();
      const old = this.modelList.at(index);
      this.selectedType.setValue({
        'modelName': old.get('modelName').value
    })

這時(shí)候就可以正常更新了。

“Angular中如何使用FormArray和模態(tài)框”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前標(biāo)題：Angular中如何使用FormArray和模態(tài)框
當(dāng)前網(wǎng)址：http://www.rwnh.cn/article12/jjspdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、商城網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)