如何为角动态形式的复选框创建组件模板 [英] How to create component template for check boxes in angular dynamic form

问题描述

我正在通过引用此链接进行动态表单单击此处 及其适用于所有文本区域，多重选择和日期类型.但是对于复选框不起作用 提交表单时，我得到了如下所示的结果

I am doing dynamic form by referring this link click here and its working for all textarea, multi select and date type. But for checkbox not working while submitting the form I am getting the out put like the below

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

通过这种方式，我可以确定选中了哪个复选框? 这里只显示选项":true

In this how I can identify which checkbox is selected? here just showing "options":true

我尝试了以下格式，但无法正常工作.

I have tried in the below format but its not working.

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>`

请让我知道我做错什么了吗

Please let me know am I doing anything wrong?

这是配置

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"
        }

谢谢

推荐答案

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

When i deal with group of checkboxes i prefer creating FormArray of group to handle it.

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

For example if we want to declare array of checkbox with the following values:

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

我们可以创建FormArray个FormArray，例如:

We can create FormArray of FormGroups like:

dynamic-form.component.ts

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

然后应将模板更改为

form-checkbox.component.html

<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>

当我们打印表格的值时，它将看起来像:

When we'll print value of our form it will look like:

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

通过这种方式，我们可以轻松地处理提交期间要传递给服务器的值:

This way we can easily manipulate the values we want to pass to the server during submitting:

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

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

in this case it will submit:

{
  "question": [
    "Option D",
    "Option F"
  ]
}

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

in some other cases we would want to pass id or something complex value.

另请参见

See also Stackblitz Example

这篇关于如何为角动态形式的复选框创建组件模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！