填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

RadioControlValueAccessor

ControlValueAccessor 用於寫入單選控制元件的值和監聽單選控制元件值的更改。這個值訪問器由 FormControlDirectiveFormControlNameNgModel 指令使用。

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.

Exported from

選擇器

屬性

屬性說明
@Input()
name: string

追蹤單選 input 元素的名稱。

Tracks the name of the radio input element.

@Input()
formControlName: string

追蹤繫結到指令的 FormControl 的名稱。該名稱對應於父 FormGroupFormArray

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

追蹤單選 input 元素的值

Tracks the value of the radio input element

說明

將單選按鈕與響應式表單指令一起使用

Using radio buttons with reactive form directives

下面的示例示範瞭如何在響應式表單中使用單選按鈕。當使用響應式表單的單選按鈕時,同一組中的單選按鈕應具有相同的 formControlName 。所提供的 name 屬性是可選的。

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'),
  });
}
    

方法

在單選 input 元素上設定 “value”,並取消選中它。

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

      
      fireUncheck(value: any): void
    
引數
value any
返回值

void