模板语法
服务端渲染
API / @angular/forms

RadioControlValueAccessor

Writes radio control values and listens to radio control changes.

@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 }

选择器

input[type=radio][formControlName] input[type=radio][formControl] input[type=radio][ngModel]

输入参数

name 绑定到 RadioControlValueAccessor.name
formControlName 绑定到 RadioControlValueAccessor.formControlName
value 绑定到 RadioControlValueAccessor.value

说明

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.

How 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

属性

属性名类型说明
onChange
onTouched
name
formControlName
value

方法

ngOnInit()

ngOnInit(): void

参数

没有参数。

返回值

void

ngOnDestroy()

ngOnDestroy(): void

参数

没有参数。

返回值

void

writeValue()

writeValue(value: any): void

参数

value

Type: any.

返回值

void

registerOnChange()

registerOnChange(fn: (_: any) => { }): void

参数

fn

Type: (_: any) => { }.

返回值

void

fireUncheck()

fireUncheck(value: any): void

参数

value

Type: any.

返回值

void

registerOnTouched()

registerOnTouched(fn: () => { }): void

参数

fn

Type: () => { }.

返回值

void

setDisabledState()

setDisabledState(isDisabled: boolean): void

参数

isDisabled

Type: boolean.

返回值

void