RadioControlValueAccessor

Stable Directive

Что делает

Записывает значения элементов управления радиокнопками и прослушивает изменения.

Используется директивами NgModel, FormControlDirective и FormControlName для синхронизации представления с моделью FormControl.

Как использовать

Если вы импортировали модуль FormsModule или ReactiveFormsModule, этот аксессор значений будет активен для любой радиокнопки, имеющей директиву формы. Вам не нужно добавлять специальный селектор для его активации.

Использование радиокнопок с директивами форм

Для использования радиокнопок в форме с шаблоном убедитесь, что радиокнопки в одной группе имеют одинаковое значение атрибута name. Радиокнопки с разными атрибутами name не влияют друг на друга.

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

При использовании радиокнопок в реактивной форме радиокнопки в одной группе должны иметь одинаковое значение formControlName. Также можно добавить атрибут name, но это необязательно.

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

экспортировано из @angular/forms/index, определено в @angular/forms/src/directives/radio_control_value_accessor.ts