RadioControlValueAccessorlink

      
        content_copy
      
      
import {Component} from '@angular/core';
 
@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm">
      <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
      <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
      <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
    </form>
    
    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
  `,
})
export class RadioButtonComp {
  myFood = 'lamb';
}
    

      
        content_copy
      
      
import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <input type="radio" formControlName="food" value="beef" > Beef
      <input type="radio" formControlName="food" value="lamb"> Lamb
      <input type="radio" formControlName="food" value="fish"> Fish
    </form>
    
    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
  `,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}