如何修補嵌套表單陣列？

我有來自表單（模態）的資料，我必須將其修補到另一個表單（折疊）中。這是資料來自的表單。

formInitializer() {
    this.agrmntsForm = this.formBuilder.group({
      sales_price: new FormControl(''),
      closing_cost_support: new FormControl(''),
      financing: new FormControl(''),
      contract_date: new FormControl(''),
      inspection_period: new FormControl(''),
      closing_date: new FormControl(''),
      contacts: this.formBuilder.array([]),
    });
  } 

這是我試圖將資料修補到的表單：

mainFormInitializer() {
    this.mainForm = this.formBuilder.group({
      agreements: this.formBuilder.array([]),
    });
  }

目前我正在修補第一個表單（模態）提交上的資料。它確實修補了第一個陣列，但我很難修補其中的嵌套表單陣列。

這是修補表單的代碼：

patchControls(formValue) {
    const control = <FormArray>this.mainForm.get('agreements');
    // const control2 = <FormArray>this.mainForm.get('contacts');
    console.log('form here', this.mainForm.controls.contacts);
    for (const obj of formValue) {
      const addrCtrl = this.createAgreementsGroup();
      const contactsCtrl = this.createContactsCtrl();
      addrCtrl.patchValue(obj);
      control.push(addrCtrl);
    }
  }

我已將代碼添加到stackblitz

uj5u.com熱心網友回復：

您需要更新以下方法：

createAgreementsGroup(obj) {
 return this.formBuilder.group({
   closing_cost_support: [obj.closing_cost_support],
   closing_date: [obj.closing_date],
   contract_date: [obj.contract_date],
   financing: [obj.financing],
   inspection_period: [obj.inspection_period],
   sales_price: [obj.sales_price],
  contacts: this.formBuilder.array(this.createContactsCtrl(obj.contacts))
 });
}


createContactsCtrl(data) {
  console.log('contacts', data);
   const formArray = [];

   for(let contact of data){
     formArray.push(
       this.formBuilder.group({
         agreement_type: [contact.agreement_type],
         company: [contact.company],
         email: [contact.email],
         name: [contact.name],
         phone_number: [contact.phone_number],
      })
    );
   }
  return formArray;
 }

patchControls(data2) {
  const control = <FormArray>this.mainForm.get('agreements');

  for (const obj of data2) {
    const addrCtrl = this.createAgreementsGroup(obj);
    control.push(addrCtrl);
 }
}

檢查此堆疊閃電戰

uj5u.com熱心網友回復：

洗掉了一些重復的代碼，您需要重新啟動agrmntsForm而不是僅重置，因為如果添加多個聯系人，其值將被重置，但在模型中添加下一次協議表單時不會保留任何聯系人陣列條目。

在下面的示例中，您可以在主表單中添加/洗掉聯系人

contacts在模板中迭代

<div *ngFor="let contact of getContactFG(agreementIndex);let contactIndex = index" >
    <div [formGroupName]="contactIndex">
        Contact {{ contactIndex   1 }} <br />
            agreement_type :
        <input type="text" formControlName="agreement_type" /><br />
            company
        <input type="text" formControlName="company" /><br />
            email :
        <input type="text" formControlName="email" /><br />
            name:
        <input type="text" formControlName="name" /><br />
            phone_number :
        <input type="text" formControlName="phone_number" /><br />
        <button (click)="removeContact(agreementIndex, contactIndex)">
            Remove Contact
        </button>
    </div>
</div>

獲取/洗掉/添加聯系人的輔助方法mainForm和agrementForm

  ngOnInit() {
    this.initForms();
  }

  initForms(): void {
    this.agrmntsForm = this.getNewAgreementFG(0);
    this.mainForm = this.formBuilder.group({
      agreements: this.formBuilder.array([]),
    });
  }

  getNewAgreementFG(noOfContacts: number): FormGroup {
    const contactArr = Array.from({ length: noOfContacts }, (v, i) => i).map(
      (n) => this.createContactsCtrl()
    );
    return this.formBuilder.group({
      sales_price: [null],
      closing_cost_support: [null],
      financing: [null],
      contract_date: [null],
      inspection_period: [null],
      closing_date: [null],
      contacts: this.formBuilder.array(contactArr),
    });
  }

  getContactFGByIndex(groupIndex: number): FormArray {
    return (this.agreements().at(groupIndex) as FormGroup).get(
      'contacts'
    ) as FormArray;
  }

  addContactsMain(groupIndex: number) {
    this.getContactFGByIndex(groupIndex).push(this.createContactsCtrl());
  }

  getContactFG(groupIndex: number): FormGroup[] {
    return this.getContactFGByIndex(groupIndex).controls as FormGroup[];
  }

  removeContact(groupIndex: number, contactIndex: number): void {
    this.getContactFGByIndex(groupIndex).removeAt(contactIndex);
  }

  onSubmit() {
    this.isAgsVisible = false;
    const agrementFG = this.getNewAgreementFG(
      this.agrmntsForm.getRawValue().contacts.length
    );
    agrementFG.patchValue(this.agrmntsForm.getRawValue());
    this.agreements().push(agrementFG);
  }

  deleteAgrContact(contactIndex) {
    this.contactsArr().removeAt(contactIndex);
  }

  public agreements(): FormArray {
    return this.mainForm.get('agreements') as FormArray;
  } 

希望這已經解決了你所有的問題

完整的 Angular 演示

標籤：有角的 角反应形式 angular2-形式 角形 表格阵列

上一篇：如何根據每個物件中的欄位值過濾陣列并將該物件下的其余欄位分組

下一篇：Angular8中的ngx-useful-swiper設定出錯