0

Plunker 链接

我正在从 JSON 加载表单。

我需要关于以下问题的帮助。

问题：单击保存按钮时，我需要获取单选按钮值true或false

但现在我将两个单选按钮值都设置为“在控制台中为真”

用户可以单击这两个按钮，因为它是一个单选组，我需要一个值为真，另一个值为假，反之亦然

{name: "rado 1", type: "radio", id: "rOne", checked: true}
{name: "radio 2", type: "radio", id: "rTwo", checked: true}

我的组件 HTML 代码

<div class="col-md-12  pb-2 pt-4">
  <form class="form-horizontal">


  <div *ngFor="let record of records"> 
  <div *ngFor="let radioButton of record.wrapper">

      <label>

        //hidden element 
        <input  type="hidden" name="{{radioButton.id}}" [(ngModel)]="radioButton.checked">

        <input 

        name="radiogroup" 

        type="radio" 

        id="{{radioButton.id}}"

        [checked]="radioButton.checked" 

        (change)="radioButton.checked = $event.target.checked" 

        [value]="radioButton.checked" 
                > 
                {{radioButton.name}}  
      </label>

  </div>
  </div>

<button class=" btn btn-primary " href="# " (click)="save() ">Save</button>

</form>
</div>`

预期：我需要单选按钮值真或假，反之亦然，它不能同时为真或假。

  • 值应该被发送到隐藏变量。
  • 双向绑定

我的 Json（我有非常复杂的 json，但这里使它变得简单）

[
  {
    "wrapper": [
          {
            "name": "rado 1",
            "type": "radio",
            "id": "rOne",
            "checked": false
          },
          {
            "name": "radio 2",
            "type": "radio",
            "id": "rTwo",
            "checked": false
          }
    ]
  }
]
4

1 回答 1

2

已编辑

  <label>
    <input 

    name="radiogroup" 

    type="radio" 

    id="{{radioButton.id}}"
    [value] = "radioButton.id"
    [(ngModel)]="selectedRadioId" > 
            {{radioButton.name}}  
  </label>

ts：

 // On click of save button show console log with values
  save(): void {
    this.records[0].wrapper.forEach((wrapper)=>{
      wrapper.checked = wrapper.id == this.selectedRadioId;
    })
    console.log(this.records[0].wrapper[0]);
    console.log(this.records[0].wrapper[1]);
  }

普朗克

于 2017-11-22T14:47:47.730 回答