Question

我正在创建一个表单，该表单使用可以更改的json动态呈现表单控件。我被困在如何提交多个复选框值上。下面是示例代码。

预先感谢

TS文件

fields: any[] = [
    {
      type: 'text',
      name: 'firstName',
      label: 'First Name',
      value: '',
      required: true,
    },
    {
      type: 'text',
      name: 'lastName',
      label: 'Last Name',
      value: '',
      required: true,
    },
    {
      type: 'text',
      name: 'email',
      label: 'Email',
      value: '',
      required: true,
    },
    {
      type: 'dropdown',
      name: 'country',
      label: 'Country',
      value: 'in',
      required: true,
      options: [
        { key: 'in', label: 'India' },
        { key: 'us', label: 'USA' }
      ]
    },
    {
      type: 'radio',
      name: 'gender',
      label: 'Gender',
      value: 'm',
      required: true,
      options: [
        { key: 'm', label: 'Male' },
        { key: 'f', label: 'Female' }
      ]
    },
    {
      type: 'checkbox',
      name: 'hobby',
      label: 'Hobby',
      required: true,
      options: [
        { key: 'f', label: 'Fishing' },
        { key: 'c', label: 'Cooking' }
      ]
    }
  ];

  ngOnInit(){

  }

  onSubmit(){
    console.log(this.formData);
  }

  changeData(indexOfField, indexOfOption){

    if(this.fields[indexOfField].options[indexOfOption].checked){
      this.fields[indexOfField].options[indexOfOption].checked=false;
    }else{
      this.fields[indexOfField].options[indexOfOption].checked=true;
    }

    console.log(this.fields[indexOfField].options[indexOfOption]);
  }

HTML文件

<div>
      <form (ngSubmit)="onSubmit()" #f="ngForm">
      <div *ngFor="let field of fields;let i=index">
        <p>{{ field.label }}</p>

        <input *ngIf="field.type=='text'" ngModel type="text" name=" 
{{field.name}}" required="{{field.required}}" >

        <select ngModel *ngIf="field.type=='dropdown'" name="{{field.name}}" required="{{field.required}}">
          <option *ngFor="let option of field.options" value="option.key">
            {{  option.label }}
          </option>
        </select>

        <div *ngIf="field.type=='radio'">
           <span *ngFor="let option of field.options">
              <input ngModel type="radio" name="{{field.name}}" [value]="option.key" required="{{field.required}}" >
              {{option.label}}
           </span> 
        </div>

        <div *ngIf="field.type=='checkbox'">
            <span *ngFor="let option of field.options;let j=index">
               <input ngModel name="{{field.name}}" [value]="option|json" 
    type="checkbox" required="{{field.required}}" (click)="changeData(i,j)" >
               {{option.label}}
            </span> 
      </div>
      </div>
      <button type="submit">Submit</button>
      </form>
    </div>

Answer 1

您可以在复选框选项中添加另一个属性，以查找被选中的项，

options: [
        { key: 'f', label: 'Fishing', selected:false },
        { key: 'c', label: 'Cooking', selected:true}
      ]

并使用selected绑定此ngModel属性

<input [(ngModel)]="option.selected" />

更新1：基于堆栈闪电

由于您与ngModel绑定，因此无需使用逻辑来切换是非，因此请删除该逻辑，我已记录了内容以查看其是否被修改，如下所示

<div *ngIf="field.type=='checkbox'">
    <span *ngFor="let option of field.options;let j=index">
       <input  name="{{field.name}}" [(ngModel)]="option.selected" type="checkbox" required="{{field.required}}" (ngModelChange)="changeData(option,field.options)" >
       {{option.label}}
    </span> 
 </div>

changeData功能

changeData(currentOption,allOptions){
    console.log(currentOption);
    console.log('All options changed with ngModel',allOptions)
}

注意：我已使用由ngModelChange插入的click函数来查看更改

Working Stackblitz

角6：模板驱动创建带有JSON的窗体以及如何处理多个复选框

1 个答案: