我有一个场景,其中配置来自服务器,表示该表单是由配置从服务器生成的;例如,输入类型,标签等。因此,文本字段,复选框,选择选项和单选按钮是由服务器响应动态构建的。
但是,当复选框具有多个值时(例如:JS,PHP,Python(,我无法做到这一点。因为我已经在循环中创建了formControl
,所以复选框中有多少选项都没有关系,我总是从复选框表单控件中获得一个输出。我尝试过formArray
,但无法完全得到我想要的结果。
// ts
const group = {};
this.category.header.forEach(input => {
group[input.id] = new FormControl('');
});
this.myFormGroup = new FormGroup(group);
// html
<form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
<div *ngFor="let form_elem of category.header">
<div [ngSwitch]="form_elem.type">
<div *ngSwitchCase="'text'">
<input type="text" formControlName="{{form_elem.id}}"/>
</div>
<div *ngSwitchCase="'radio'">
<div *ngFor="let item of form_elem.options">
<input type="radio" [value]='item' formControlName="{{form_elem.id}}" >
</div>
</div>
<div *ngSwitchCase="'select'">
<select formControlName="{{form_elem.label}}">
<option *ngFor="let opt of form_elem.options">
{{opt}}
</option>
</select>
</div>
<div *ngSwitchCase="'checkbox'">
<div *ngFor="let item of form_elem.options">
<input type="checkbox" [value]='item' formControlName="{{form_elem.id}}">
</div>
</div>
</div>
</div>
<input type="submit" value="save"/>
</form>
我希望我的复选框属性会像
复选框:[{option1: true}, {option2: false} ]
您可以尝试使用这些方式,但是您需要检查某个条件的复选框
this.category.header.forEach(input => {
if(input.type == 'checkbox'){
let opts = {};
for (let opt of input.options) {
opts[opt.key] = new FormControl(opt.value);
}
group[input.id] = new FormGroup(opts)
}else{
group[input.id] = new FormControl('');
}
});