API 参考手册
API > @angular/forms

RadioControlValueAccessor

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

选择器

属性

属性说明
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

说明

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'), }); }
      
      
  1. import {Component} from '@angular/core';
  2. import {FormControl, FormGroup} from '@angular/forms';
  3.  
  4. @Component({
  5.   selector: 'example-app',
  6.   template: `
  7.     <form [formGroup]="form">
  8.       <input type="radio" formControlName="food" value="beef" > Beef
  9.       <input type="radio" formControlName="food" value="lamb"> Lamb
  10.       <input type="radio" formControlName="food" value="fish"> Fish
  11.     </form>
  12.     
  13.     <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
  14.   `,
  15. })
  16. export class ReactiveRadioButtonComp {
  17.   form = new FormGroup({
  18.     food: new FormControl('lamb'),
  19.   });
  20. }

方法

ngOnInit()

A lifecycle method called when the directive is initialized. For internal use only.

ngOnInit(): void
      
      ngOnInit(): void
参数

没有参数。

返回值

void

ngOnDestroy()

Lifecycle method called before the directive's instance is destroyed. For internal use only.

ngOnDestroy(): void
      
      ngOnDestroy(): void
参数

没有参数。

返回值

void

writeValue()

Sets the "checked" property value on the radio input element.

writeValue(value: any): void
      
      writeValue(value: any): void
参数
value any

The checked value

返回值

void

registerOnChange()

Registers a function called when the control value changes.

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

The callback function

返回值

void

fireUncheck()

Sets the "value" on the radio input element and unchecks it.

fireUncheck(value: any): void
      
      fireUncheck(value: any): void
参数
value any
返回值

void

registerOnTouched()

Registers a function called when the control is touched.

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

The callback function

返回值

void

setDisabledState()

Sets the "disabled" property on the input element.

setDisabledState(isDisabled: boolean): void
      
      setDisabledState(isDisabled: boolean): void
参数
isDisabled boolean

The disabled value

返回值

void