在表单数组中分配动态表单控件：Angular

如何解决在表单数组中分配动态表单控件：Angular

在我的 angular 应用程序中，尝试在表单数组中添加一个带有两个表单控件的动态表单组，我如何才能在这里动态添加表单控件？我试图以这种方式添加 [formControlName]="i" 但得到这个 Cannot find control with path: 'dinings -> 0 -> 0'。

如果我静态添加 formControlName="name" 和 formControlName="cuisine" 没有收到错误，但添加后表单控件中的值没有更新。

这就是我所做的-

HTML

 <div>
     <form [formGroup]="diningForm" (ngSubmit)="addDiningDetails()">
       ....
       <div class="added-dining-list">
         <ul>
           <li formArrayName="dinings" *ngFor="let dining of dinings;let i = index">
            <div [formGroupName]="i">
              <input type="text" class="form-input" placeholder="Dining Name" [formControlName]="i" />
              <input type="text" class="form-input" placeholder="Dining Cuisine" [formControlName]="i" />
              <a href="#">Delete</a>
           </div>
        </li>
        <li>
           <form [formGroup]="diningInfoForm" class="dining-info-form">
              <input type="text" class="form-input" formControlName="diningName"/>
              <input type="text" class="form-input" formControlName="diningCuisine"/>
              <a href="#" (click)="addDining($event)">Add Dining</a>
           </form>
        </li>
      </ul>
    </div>
  </form>

TS

ngOnInit(){
  //Dining Form
    this.diningForm = this._formBuilder.group({
        isOfferingDining: new FormControl('',[Validators.required]),dinings: this._formBuilder.array([]),diningInfo: new FormControl('')
    });

  //Dining info add form
    this.diningInfoForm = this._formBuilder.group({
        diningName: new FormControl('',diningCuisine: new FormControl('',[Validators.required])
    });
}

//Adding single dining in form array
addDiningMenu(event: MouseEvent) {
    event.preventDefault();
    if (this.diningInfoForm.invalid) {
        this.showErrorMessages();
    }
    const formValue = this.diningInfoForm.value;
    const formGroup = this._formBuilder.group({
        name: new FormControl(formValue.diningName,cuisine: new FormControl(formValue.diningCuisine,[Validators.required])
    });
    this.dinings.push(formGroup);
}

//Final Submit of the form
addDiningDetails() {
    this._messageService.clear();
    if (this.diningForm.invalid) {
        this.showErrorMessages();
        return;
    }
    console.log(this.diningForm.value);
}

//Getting form array
get dinings() {
    return (this.diningForm.get('dinings') as FormArray).controls;
}

解决方法

首先，你能嵌套表单吗？否 见Can you nest html forms?。从表单中删除嵌套表单

下一步是了解您希望您的对象是什么样的，我们将生成一个如下所示的表格

{
   isOfferingDining: '',dinings: [
     {
        diningName: '',diningCuisine: ''
      },{
        diningName: '',diningCuisine: ''
      }
   ]
}

我假设您有多个 dinings，并且每个餐厅都有一个 diningName 和 diningCuisine。您的表格在澄清这一点方面没有做太多

更改 getter dinings 以返回 FormArray

  //Getting form array
  get dinings() {
    return (this.diningForm.get('dinings') as FormArray);
  }

现在定义 addDinings() 和 deleteDining() 函数

  addDining() {
    this.dinings.push(
      this._formBuilder.group({
        diningName: new FormControl('',[Validators.required]),diningCuisine: new FormControl('',[Validators.required])
      })
    );
  }
  deleteDining(i) {
    this.dinings.removeAt(i);
  }

修改你的html以匹配表单组

<form [formGroup]="diningForm" (ngSubmit)="addDiningDetails()">
  Is Offering Dining <input formControlName='isOfferingDining'>
  <div class="added-dining-list">
    <ul formArrayName="dinings">
      <li *ngFor="let dining of dinings.controls;let i = index" [formGroupName]="i">
        <input type="text" class="form-input" placeholder="Dining Name" formControlName="diningName" />
        <input type="text" class="form-input" placeholder="Dining Cuisine" formControlName="diningCuisine" />
        <a (click)="deleteDining(i)" href="#">Delete</a>
      </li>
    </ul>
    <a href="#" (click)="addDining()">Add Dining</a>
  </div>
  <button type="submit">Submit</button>
</form>

现在一切都应该按预期工作

See Demo Here

,

您需要指定正确的表单控件名称：

        <li formArrayName="dinings" *ngFor="let dining of dinings;let i = index">
            <div [formGroupName]="i">
              <input type="text" class="form-input" placeholder="Dining Name" [formControlName]="dining.name" />
              <input type="text" class="form-input" placeholder="Dining Cuisine" [formControlName]="dining.cuisine" />
              <a href="#">Delete</a>
           </div>

,

尝试删除 controls 中的 get dinings()。

//Getting form array
get dinings() {
    return this.diningForm.get('dinings') as FormArray;
}

,

@Rahul 你可以改变你的用餐返回 FormArray 而不是控件。

在 component.ts 文件中

get dinings() {
  return this.diningForm.get('dinings') as FormArray;
}

在 component.html 文件中

<li formArrayName="dinings">
<div *ngFor="let dining of dinings().controls; let i = index">
  <div [formGroupName]="i">
    <input type="text" class="form-input" placeholder="Dining Name" formControlName="name" />
    <input type="text" class="form-input" placeholder="Dining Cuisine" formControlName="cuisine" />
    <a href="#">Delete</a>
  </div>
</div>
</li>

参考：FormArray Reference Link