javascript - Angular 2 - 单选按钮双向绑定(bind)，获取隐藏元素中的值

Question

<强> Plunker link

我正在从 JSON 加载表单。

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

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

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

用户可以单击这两个按钮，因为它是一个单选组，我需要一个值为 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>`

预期:我需要单选按钮值 true 或 false，反之亦然，它不能同时为 true 或 false。

• 值应发送到隐藏变量。
• 双向绑定(bind)

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

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

Answer 1

已编辑

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

Plunker