日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

怎么結(jié)合使用FormArray模態(tài)框?下面本篇文章給大家介紹一下Angular的FormArray和模態(tài)框結(jié)合使用的方法,希望對大家有所幫助!


淺析Angular中怎么結(jié)合使用FormArray和模態(tài)框


業(yè)務(wù)場景

使用FormArray制作動態(tài)表單。每創(chuàng)建一個表單,頁面就新增一個input顯示表單填寫的標(biāo)題,點擊編輯再跳轉(zhuǎ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

表單列表

淺析Angular中怎么結(jié)合使用FormArray和模態(tài)框

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

淺析Angular中怎么結(jié)合使用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="請輸入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)系,在點擊的時候需要傳遞參數(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 = <FormGroup>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檢測機(jī)制,仔細(xì)查看文檔發(fā)現(xiàn)有一行很重要 angular文檔在最下面寫著

淺析Angular中怎么結(jié)合使用FormArray和模態(tài)框

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


淺析Angular中怎么結(jié)合使用FormArray和模態(tài)框


所以正確的做法是啥??

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

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

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

總結(jié)

其實查到最后本質(zhì)上還是回歸文檔。在排查錯誤也走了很多坑,而且國內(nèi)基本沒什么angular的文章,還得靠外網(wǎng)論壇去找問題。


分享到:
標(biāo)簽:Angular模態(tài)框 FormArray
用戶無頭像

網(wǎng)友整理

注冊時間:

網(wǎng)站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定