angular - 在 formBuilder.group 响应式(Reactive)表单中添加动态属性

Question

我正在使用 Angular react 形式，并且我的形式结构如下。

{  
   "name": '',  
   "params": {}  
}

我想在参数 formGroup 内添加动态属性(表单控件)。下面是我使用的代码，但它给出了空的 controls 对象。

ts 文件

exercise = {
    data:[
      {param: "Reps"},
      {param: "Tempo"}
    ],
};

{
   this.exerciseForm = this.formBuilder.group({
      name: ['', [Validators.required],
      params: this.formBuilder.group({})
   });
}

get getAllParams(){
  return this.exerciseForm.get('params') as FormGroup;
} 

addNewParam(){
  this.getAllParams[param] = this.formBuilder.control('');
}

模板文件

<div formGroupName="params" *ngFor="let param of exercise.data;">
    <input type="text" [formControlName]="param.param" />
</div>

有人可以帮我创建相同的结构吗？

Answer 1

//At first only "name" and a formGroup "params" empty
this.exerciseForm = this.formBuilder.group({
  name: ["", [Validators.required]],
  params: this.formBuilder.group({})
});

this.exercise.data.forEach(param => {
  (this.exerciseForm.get("params") as FormGroup).addControl(
    param.param,
    new FormControl()
  );
});

参见stackblitz

更新:.html 类似

<form [formGroup]="exerciseForm">
  <input formControlName="name">
  <div formGroupName="params">
  <div *ngFor="let param of this.exercise.data">
    <input [formControlName]="param.param">
  </div>
  </div>
</form>

<pre>
  {{exerciseForm?.value|json }}
</pre>

*更新 2 以避免错误我们可以在输入中添加一个 *ngIf

  <input *ngIf="exerciseForm.get('params.'+param.param)"
    [formControlName]="param.param">

另一种方法是使用 keypipe 值循环控制

<form [formGroup]="exerciseForm2">
  <input formControlName="name">
  <div formGroupName="params">
  <div *ngFor="let control of exerciseForm2.get('params').controls|keyvalue;let i=index">
    <input [formControl]="control.value">
  </div>
  </div>
</form>