linkRadioControlValueAccessor
| npm Package | @angular/forms |
|---|---|
| Module | import { RadioControlValueAccessor } from '@angular/forms'; |
| Source | forms/src/directives/radio_control_value_accessor.ts |
Writes radio control values and listens to radio control changes.
Used by NgModel, FormControlDirective, and FormControlName
to keep the view synced with the FormControl model.
linkOverview
@Directive({
selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
providers: [RADIO_VALUE_ACCESSOR]
})
class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
onChange: () => { }
onTouched: () => { }
name: string
formControlName: string
value: any
ngOnInit(): void
ngOnDestroy(): void
writeValue(value: any): void
registerOnChange(fn: (_: any) => {}): void
fireUncheck(value: any): void
registerOnTouched(fn: () => {}): void
setDisabledState(isDisabled: boolean): void
}
linkHow To Use
If you have imported the FormsModule or the ReactiveFormsModule, this
value accessor will be active on any radio control that has a form directive. You do
not need to add a special selector to activate it.
linkHow to use radio buttons with form directives
To use radio buttons in a template-driven form, you'll want to ensure that radio buttons
in the same group have the same name attribute. Radio buttons with different name
attributes do not affect each other.
import {Component} from '@angular/core';
@Component({
selector: 'example-app',
template: `
<form #f="ngForm">
<input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
<input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
<input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
</form>
<p>Form value: {{ f.value | json }}</p> <!-- {food: 'lamb' } -->
<p>myFood value: {{ myFood }}</p> <!-- 'lamb' -->
`,
})
export class RadioButtonComp {
myFood = 'lamb';
}
When using radio buttons in a reactive form, radio buttons in the same group should have the
same formControlName. You can also add a name attribute, but it's 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'),
});
}
- npm package:
@angular/forms
linkSelectors
input[type=radio][formControlName]
input[type=radio][formControl]
input[type=radio][ngModel]
linkInputs
name bound to RadioControlValueAccessor.name
value bound to RadioControlValueAccessor.value
linkConstructor
constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector)
linkMembers
formControlName: string