RadioControlValueAccessor
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.
NgModules
-
ReactiveFormsModule
-
FormsModule
Selectors
input[type=radio][formControlName]
input[type=radio][formControl]
input[type=radio][ngModel]
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'),
});
}
Methods
ngOnInit() |
---|
A lifecycle method called when the directive is initialized. For internal use only. |
ngOnInit(): voidParametersThere are no parameters. Returns
|
ngOnDestroy() |
---|
Lifecycle method called before the directive's instance is destroyed. For internal use only. |
ngOnDestroy(): voidParametersThere are no parameters. Returns
|
writeValue() | |||
---|---|---|---|
Sets the "checked" property value on the radio input element. | |||
writeValue(value: any): voidParameters
Returns
|
registerOnChange() | |||
---|---|---|---|
Registers a function called when the control value changes. | |||
registerOnChange(fn: (_: any) => {}): voidParameters
Returns
|
fireUncheck() | |||
---|---|---|---|
Sets the "value" on the radio input element and unchecks it. | |||
fireUncheck(value: any): voidParameters
Returns
|
registerOnTouched() | |||
---|---|---|---|
Registers a function called when the control is touched. | |||
registerOnTouched(fn: () => {}): voidParameters
Returns
|
setDisabledState() | |||
---|---|---|---|
Sets the "disabled" property on the input element. | |||
setDisabledState(isDisabled: boolean): voidParameters
Returns
|
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v8.angular.io/api/forms/RadioControlValueAccessor