Question

我有一个场景，其中配置来自服务器，这意味着表单是由服务器上的config生成的；例如输入类型，标签等。因此，文本字段，复选框，选择选项和单选按钮是由服务器响应动态构建的。

但是当复选框具有多个值（例如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} ]

Answer 1

您可以尝试这些方式，但是您需要检查复选框的某处条件

    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('');
        }
    });

角动响应形式的多个复选框

1 个答案: