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 {}
constructor
RadioControlValueAccessor
RadioControlRegistry
RadioControlValueAccessor
name
string
Tracks the name of the radio input element.
formControlName
string
Tracks the name of the FormControl
bound to the directive. The name corresponds
to a key in the parent FormGroup
or FormArray
.
value
any
Tracks the value of the radio input element
fireUncheck
void
Sets the "value" on the radio input element and unchecks it.
any
void
Description
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'), });}