如何制作动态表单控件？

Question

我想创建一个包含未知数量的表单控件的表单组。 （根据我的数据库）。 我尝试使用FormArray、FormBuilder 来做到这一点，如下所示：

criterions:Criterion[]=[];
fb:FormBuilder= new FormBuilder();
preferencesForm:FormGroup=new FormGroup({
  aliases: this.fb.array([
    this.fb.control('')
  ])
});

get aliases() {
  return this.preferencesForm.get('aliases') as FormArray;
}

  constructor( private service:flightsService) { }

  ngOnInit(): void {
    this.service.getAllCriterion().subscribe(data=>{
      this.criterions=data;
      this.criterions.forEach(a=>this.aliases.push(this.fb.control('')))
    });
  }     

我的 HTML 是：

<div [formGroup]="preferencesForm">
<div formArrayName="aliases">
    <div *ngFor="let alias of aliases.controls; let i=index">
      <label>
        {{criterions[i].criterionName}}
        <mat-radio-group formControlName="i" aria-label="Select an option">
            <mat-radio-button [value]="true"  >want</mat-radio-button>
            <mat-radio-button [value]="false" >don't want</mat-radio-button>
            <mat-radio-button [value]="" >don't care</mat-radio-button>
          </mat-radio-group>
      </label>
    </div>
  </div>
</div>

Answer 1

在 ts

constructor(
    private _formBuilder: FormBuilder){
 this.createForm();
}

createForm(){
this.preferencesForm=this._formBuilder.group({
aliases: this._formBuilder.array([])
})
}


createFormArray() {
    let formGroup = this._formBuilder.group({
      radio: [''],


    });


    return formGroup;
  }


ngOnInit(): void {
    this.service.getAllCriterion().subscribe(data=>{
      this.criterions=data;
      this.criterions.forEach(a=>this.aliases.push(createFormArray())
    });

在 HTML 中

<div [formGroup]="preferencesForm">
<div formArrayName="aliases">
    <div *ngFor="let alias of aliases.controls; let i=index">
      <label>

        <mat-radio-group formControlName="radio" aria-label="Select an option">
            <mat-radio-button [value]="true"  >want</mat-radio-button>
            <mat-radio-button [value]="false" >don't want</mat-radio-button>
            <mat-radio-button [value]="" >don't care</mat-radio-button>
          </mat-radio-group>
      </label>
    </div>
  </div>
</div>