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.
API
class RadioControlValueAccessor extends BuiltInControlValueAccessor implements ControlValueAccessor ,OnDestroy ,OnInit {}
onChange
() => voidThe registered callback function called when a change event occurs on the input element.
Note: we declare onChange here (also used as host listener) as a function with no arguments
to override the onChange function (which expects 1 argument) in the parent
BaseControlValueAccessor class.
name
stringTracks the name of the radio input element.
formControlName
stringTracks the name of the FormControl bound to the directive. The name corresponds
to a key in the parent FormGroup or FormArray.
value
anyTracks the value of the radio input element
ngOnInit
voidvoidngOnDestroy
voidvoidwriteValue
voidSets the "checked" property value on the radio input element.
anyvoidregisterOnChange
voidRegisters a function called when the control value changes.
(_: any) => {}voidsetDisabledState
voidbooleanvoidfireUncheck
voidSets the "value" on the radio input element and unchecks it.
anyvoidonTouched
() => voidThe registered callback function called when a blur event occurs on the input element.
setProperty
voidHelper method that sets a property on a target element using the current Renderer implementation.
stringanyvoidregisterOnTouched
voidRegisters a function called when the control is touched.
() => voidvoidDescription
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.
Exported by
Usage Notes
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' } --> `, standalone: false,})export class ReactiveRadioButtonComp { form = new FormGroup({ food: new FormControl('lamb'), });}