angular 2 - radio button two way binding, get values in a hidden element

Question

Plunker link

I am loading form from JSON.

I need help on below issue.

Issue : On click of save button i need to get the radio button values either true or false

but now i am getting both radio button values as 'true in console'

Users can click both the buttons, since it is a radio group, i need one value as true and another one as false vice versa

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

My component HTML code

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

Expected: I need radio button values true or false vice versa, it can not be both true or false.

• values should be sent to hidden variables.
• Two way binding

My Json (i have very complex json but here making it simple one)

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

Answer 1

Edited

  <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