如何修補嵌套表單數組？

Question

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

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

Answer 1

您需要更新以下方法：

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);
 }
}

檢查此堆棧閃電戰

Answer 2

刪除了一些重復的代碼，您需要重新啟動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 演示