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.
Exported from
Selectors
input[type=radio][formControlName]
input[type=radio][formControl]
input[type=radio][ngModel]
Properties
Property | Description |
---|---|
@Input()
|
Tracks the name of the radio input element. |
@Input()
|
Tracks the name of the |
@Input()
|
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
fireUncheck() |
---|
Sets the "value" on the radio input element and unchecks it. |