RadioControlValueAccessor

The ControlValueAccessor for writing radio control values and listening to radio control changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

NgModules

• ReactiveFormsModule

• FormsModule

Selectors

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

Properties

Property	Description
onChange: () => { }	The registered callback function called when a change event occurs on the input element.
onTouched: () => { }	The registered callback function called when a blur event occurs on the input element.
@Input()name: string	Tracks the name of the radio input element.
@Input()formControlName: string	Tracks the name of the FormControl bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray.
@Input()value: any	Tracks the value of the radio input element

Description

Using radio buttons with reactive form directives

The follow example shows how to use radio buttons in a reactive form. When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. Providing a name attribute is 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()
A lifecycle method called when the directive is initialized. For internal use only.
ngOnInit(): void Parameters There are no parameters. Returns void

ngOnDestroy()
Lifecycle method called before the directive's instance is destroyed. For internal use only.
ngOnDestroy(): void Parameters There are no parameters. Returns void

writeValue()
Sets the "checked" property value on the radio input element.
writeValue(value: any): void Parameters value any The checked value Returns void

registerOnChange()
Registers a function called when the control value changes.
registerOnChange(fn: (_: any) => {}): void Parameters fn (_: any) => {} The callback function Returns void

fireUncheck()
Sets the "value" on the radio input element and unchecks it.
fireUncheck(value: any): void Parameters value any Returns void

registerOnTouched()
Registers a function called when the control is touched.
registerOnTouched(fn: () => {}): void Parameters fn () => {} The callback function Returns void

setDisabledState()
Sets the "disabled" property on the input element.
setDisabledState(isDisabled: boolean): void Parameters isDisabled boolean The disabled value Returns void