RadioControlValueAccessor
directive
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()name: string |
Tracks the name of the radio input element. |
@Input()formControlName: string |
Tracks the name of the |
@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
fireUncheck()
|
|||
---|---|---|---|
Sets the "value" on the radio input element and unchecks it. |
|||
|
value |
any |
Returns
void
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/forms/RadioControlValueAccessor