代码之家 › 专栏 › 技术社区 › yavg

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

angular

0

yavg · 技术社区 · 7 年前

我知道我做错了一些显而易见的事情,请原谅我的无知。基本上,我想为我的复选框数组动态创建一个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

非常感谢。

1 回复 | 直到 7 年前

1

0

ahbon 7 年前

你在模板中循环使用了错误的对象。你必须使用 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

希望能有所帮助。