RadioControlValueAccessor

Writes radio control values and listens to radio control changes.

See more...

NgModules

• FormsModule

• ReactiveFormsModule

Selectors

• input[type=radio][formControlName]
• input[type=radio][formControl]
• input[type=radio][ngModel]

Properties

Property	Description
onChange: () => { }
onTouched: () => { }
@Input()name: string
@Input()formControlName: string
@Input()value: any

Description

Used by NgModel, FormControlDirective, and FormControlName to keep the view synced with the FormControl model.

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any radio control that has a form directive. You do not need to add a special selector to activate it.

How to use radio buttons with form directives

To use radio buttons in a template-driven form, you'll want to ensure that radio buttons in the same group have the same name attribute. Radio buttons with different name attributes do not affect each other.

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';
}

When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's optional.

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'),
  });
}

Methods

ngOnInit()
ngOnInit(): void Parameters There are no parameters. Returns void

ngOnDestroy()
ngOnDestroy(): void Parameters There are no parameters. Returns void

writeValue()
writeValue(value: any): void Parameters value Type: any. Returns void

registerOnChange()
registerOnChange(fn: (_: any) => { }): void Parameters fn Type: (_: any) => { }. Returns void

fireUncheck()
fireUncheck(value: any): void Parameters value Type: any. Returns void

registerOnTouched()
registerOnTouched(fn: () => { }): void Parameters fn Type: () => { }. Returns void

setDisabledState()
setDisabledState(isDisabled: boolean): void Parameters isDisabled Type: boolean. Returns void