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

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

原錯誤代碼思路

• 點擊編輯后，將點擊的FormArray的元素傳遞給一個臨時變量 this.selectedType = this.modelList.at(index);，并且對模態(tài)框表單傳值。

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

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

• 點擊新增，創(chuàng)建一個新的FormGroup對象

• 保存添加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修改值會影響到模態(tài)框，但是模態(tài)框的值改變保存卻讓外部沒有更新。通過console方式查看頁面的FormArray內(nèi)部參數(shù)發(fā)現(xiàn)其實是有改變的，只是angular沒有檢測到。這個時候判斷沒有發(fā)生響應(yīng)的原因一般是沒有觸發(fā)angular檢測機制，仔細(xì)查看文檔發(fā)現(xiàn)有一行很重要 angular文檔在最下面寫著

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

所以正確的做法是啥？？

在賦值的地方不能偷懶，仍然要重新創(chuàng)建新對象，再拿原對象的賦值?！鞠喈?dāng)于深拷貝】

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

這時候就可以正常更新了。

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