RadioControlValueAccessor — Angular

ControlValueAccessor для записи значений элементов управления radio и отслеживания изменений этих значений. Средство доступа к значению используется директивами FormControlDirective, FormControlName и NgModel.

API

class RadioControlValueAccessor extends BuiltInControlValueAccessor implements ControlValueAccessor ,OnDestroy ,OnInit {
  constructor(renderer: Renderer2, elementRef: ElementRef<any>, _registry: RadioControlRegistry, _injector: Injector): RadioControlValueAccessor;
  @Input() name: string;
  @Input() formControlName: string;
  @Input() value: any;
  fireUncheck(value: any): void;
}

constructor

RadioControlValueAccessor

@paramrendererRenderer2

@paramelementRefElementRef<any>

@param_registryRadioControlRegistry

@param_injectorInjector

@returnsRadioControlValueAccessor

name

string

Отслеживает имя элемента radio.

formControlName

string

Отслеживает имя FormControl, связанного с директивой. Имя соответствует ключу в родительском FormGroup или FormArray.

value

any

Отслеживает значение элемента radio

fireUncheck

void

Устанавливает значение «value» для элемента radio и снимает с него отметку.

@paramvalueany

@returnsvoid

Описание

Экспортируется из

ReactiveFormsModule
FormsModule

Примечания по использованию

Использование переключателей radio с директивами реактивных форм

В следующем примере показано, как использовать переключатели radio в реактивной форме. При использовании переключателей radio в реактивной форме все переключатели в одной группе должны иметь одинаковый 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' } -->
  `,
  standalone: false,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}