Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/forms

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

Selectors

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'), }); } 
      
      
  1. import {Component} from '@angular/core';
  2. import {FormControl, FormGroup} from '@angular/forms';
  3.  
  4. @Component({
  5.   selector: 'example-app',
  6.   template: `
  7.     <form [formGroup]="form">
  8.       <input type="radio" formControlName="food" value="beef" > Beef
  9.       <input type="radio" formControlName="food" value="lamb"> Lamb
  10.       <input type="radio" formControlName="food" value="fish"> Fish
  11.     </form>
  12.     
  13.     <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
  14.   `,
  15. })
  16. export class ReactiveRadioButtonComp {
  17.   form = new FormGroup({
  18.     food: new FormControl('lamb'),
  19.   });
  20. }

Methods

ngOnInit()

A lifecycle method called when the directive is initialized. For internal use only.
ngOnInit(): void
      
      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
      
      ngOnDestroy(): void
Parameters

There are no parameters.

Returns

void

writeValue()

Sets the "checked" property value on the radio input element.
writeValue(value: any): void
      
      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
      
      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
      
      fireUncheck(value: any): void
Parameters
value any
Returns

void

registerOnTouched()

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

The callback function
Returns

void

setDisabledState()

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

The disabled value
Returns

void