Question

我知道自己在做明显的错误，请原谅我的无知。基本上，我想为我的复选框数组动态创建一个formControl。我打算验证至少一个复选框。我该怎么办？

this.validationForm = fb.group({
  text:[null, [Validators.required]]
  // I dont know how to create a form control dynamic,that's why I have not put it here
});


aData=[
 {"name":"goku", "select":true},
 {"name":"vegeta", "select":false},
 {"name":"krillin",  "select":true}        
]


<form [formGroup]="validationForm" >
  <input type="checkbox" *ngFor="let item of aData" [formControlName]="item.select">{{item.name}}
  <input type="text" formControlName="text">  
</form>

<button (click)="fn_submit(validationForm)">Validate form</button>

这是我的实时代码：

https://stackblitz.com/edit/angular-7iywjj?file=src/app/app.component.html

谢谢

Answer 1

您正在遍历模板中的错误对象。您必须使用在表单初始化中创建的group。

您可以这样创建动态复选框组：

const formControls = this.aData.map(control => new FormControl(false));

this.validationForm = this.fb.group({
   checkboxes: new FormArray(formControls),
   text: new FormControl()
});

这是您正在工作的实时代码：https://stackblitz.com/edit/angular-ztab6u?file=src/app/app.component.ts

希望这会有所帮助。

如何为复选框动态添加表单控件？

1 个答案: