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.
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.
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'),
});
}
@angular/forms
class RadioControlValueAccessor implements ControlValueAccessor,
constructor(_renderer: Renderer, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector)
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
}
input[type=radio][formControlName]
input[type=radio][formControl]
input[type=radio][ngModel]
constructor(_renderer: Renderer, _elementRef: ElementRef, _registry: RadioControlRegistry, _injector: Injector)
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
exported from forms/index, defined in forms/src/directives/radio_control_value_accessor.ts
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/forms/index/RadioControlValueAccessor-directive.html