Question

我通过引用此链接click here进行动态表单它适用于所有textarea，多选和日期类型。但是对于复选框不起作用在提交表格的同时，我正在接受如下的

{"name":"df","food":"Pizza","description":"zx v","color":["Red"],"incidentdate":"2017-09-22","options":true,"gender":"Female","submit":null}

在此我如何识别选中哪个复选框？这里只显示＆＃34;选项＆＃34;：true

我尝试过以下格式，但它不起作用。

template: `<div 
      class="dynamic-field form-input" 
      [formGroup]="group">
       <label>{{ config.label }}</label>
       <span *ngFor="let option of config.options">        
        <input type="checkbox" [formControlName]="config.name" value="{{option}}" />{{option}}        
      </span>        
    </div>`

请告诉我，我做错了什么？

这是配置

this.config =     
        {
            "label" : "Title",
            "type" : "input",
            "name" : "title"
        }, 
        {
            "label" : "Status",
            "type" : "select",
            "name" : "status",
            "options" : [ 
                "Accepted", 
                "Rejected", 
                "Pending", 
                "Complete"
            ],
            "placeholder" : "Select an option"
        }, 
        {
            "label" : "What options?",
            "type" : "checkbox",
            "name" : "question",
            "options" : [ 
                "Option D", 
                "Option E", 
                "Option F"
            ]
        }, 
        {
            "label" : "Incident Date",
            "type" : "date",
            "name" : "incidentdate"
        }, 
        {
            "label" : "Comments",
            "type" : "textarea",
            "name" : "comments"
        }, 
        {
            "label" : "Description",
            "type" : "textarea",
            "name" : "descriptions"
        }, 
        {
            "label" : "Is it good?",
            "type" : "radio",
            "name" : "gender",
            "options" : [ 
                "Male", 
                "Female"
            ]
        }, 
        {
            "label" : "Who is responsible?",
            "type" : "multiselect",
            "name" : "responsible",
            "options" : [ 
                "Manager", 
                "Supervisor", 
                "Site-Supervisor"
            ]
        }, 
        {
            "label" : "Submit",
            "type" : "button",
            "name" : "submit"
        }

谢谢

Answer 1

当我处理一组复选框时，我更喜欢创建组的FormArray来处理它。

例如，如果我们要声明具有以下值的复选框数组：

[ 
  "Option D", 
  "Option E", 
  "Option F"
]

我们可以创建FormArray的{{1}}个像：

<强>动态form.component.ts

FormGroup

然后模板应更改为

<强>形状checkbox.component.html

createControl(config: FieldConfig) {
  ...
  if(config.type === 'checkbox') {
      return this.fb.array(
        config.options.map(x => {
          return this.fb.group({
            name: x,
            value: value ? value.indexOf(x) > - 1 : false
          })
        }));
  }

当我们打印表单的价值时，它将如下所示：

<div class="dynamic-field form-input" [formGroup]="group">
  <ng-container [formArrayName]="config.name">
    <label>{{ config.label }}</label>
    <span *ngFor="let option of config.options; let i = index" [formGroupName]="i">        
      <input type="checkbox" [name]="config.name" formControlName="value"  />{{option}}
    </span>    
  </ng-container>   
</div>

这样我们可以在提交期间轻松操作我们想要传递给服务器的值：

{
  "question": [
    {
      "name": "Option D",
      "value": true
    },
    {
      "name": "Option E",
      "value": true
    },
    {
      "name": "Option F",
      "value": false
    }
  ]
}

在这种情况下，它将提交：

handleSubmit(event: Event) {
  event.preventDefault();
  event.stopPropagation();

  const result = {...this.value};
  Object.keys(result).forEach((key, index) => {   
    if(this.controls[index].type === 'checkbox') {    
      result[key] = result[key].filter(x => x.value).map(x => x.name);
    }
  })
  this.submit.emit(result);
}

在其他一些情况下，我们希望传递id或某些复杂的值。

另请参阅 Stackblitz Example

如何以角度动态形式为复选框创建组件模板

1 个答案: