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

Question

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

如果我静态添加 formControlName="name" 和 formControlName="cuisine" 没有得到错误，但是添加后 formcontrols 中的值没有更新。

这是我做的-

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('', [Validators.required]),
        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, [Validators.required]),
        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;
}

Answer 1

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

        <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>

Answer 2

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

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

Answer 3

@Rahul 你可以改变你的晚餐 return 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

Answer 4

首先，您可以嵌套表单吗？否请参阅 Can you nest html forms?。从您的表单中删除嵌套表单

下一步是拍下您期望对象的图片，我们将生成如下所示的表格

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

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

将getterdinings改为return一个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

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

Assign dynamic Form control in Form Array : Angular

angular

angular-reactive-forms

formarray