ControlValueAccessor — Angular

Определяет интерфейс, служащий мостом между API форм Angular и нативным элементом DOM.

API

interface ControlValueAccessor {
  writeValue(obj: any): void;
  registerOnChange(fn: any): void;
  registerOnTouched(fn: any): void;
  optional setDisabledState(isDisabled: boolean): void;
}

writeValue

void

Записывает новое значение в элемент.

Этот метод вызывается API форм для обновления представления, когда требуется программно передать изменения из модели в представление.

@paramobjany

Новое значение элемента

@returnsvoid

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

Запись значения в элемент

В следующем примере значение записывается в нативный элемент DOM.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}

registerOnChange

void

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

Этот метод вызывается API форм при инициализации для обновления модели формы, когда значения передаются из представления в модель.

При реализации метода registerOnChange в собственном средстве доступа к значению сохраните переданную функцию, чтобы ваш класс вызывал её в нужный момент.

@paramfnany

Функция обратного вызова для регистрации

@returnsvoid

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

Сохранение функции изменения

В следующем примере переданная функция сохраняется как внутренний метод.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

При изменении значения в пользовательском интерфейсе вызовите зарегистрированную функцию, чтобы API форм мог обновить своё состояние:

host: {
   '(change)': '_onChange($event.target.value)'
}

registerOnTouched

void

Регистрирует функцию обратного вызова, которая вызывается API форм при инициализации для обновления модели формы при потере фокуса.

При реализации registerOnTouched в собственном средстве доступа к значению сохраните переданную функцию, чтобы ваш класс вызывал её, когда элемент управления следует считать потерявшим фокус или «затронутым».

@paramfnany

Функция обратного вызова для регистрации

@returnsvoid

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

Сохранение функции обратного вызова

В следующем примере переданная функция сохраняется как внутренний метод.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

При потере фокуса (или аналогичном событии) ваш класс должен вызвать зарегистрированную функцию, чтобы API форм мог обновить своё состояние:

host: {
   '(blur)': '_onTouched()'
}

setDisabledState

void

Функция, вызываемая API форм при изменении статуса элемента управления на 'DISABLED' или с 'DISABLED'. В зависимости от статуса она включает или отключает соответствующий элемент DOM.

@paramisDisabledboolean

Статус отключения, который нужно установить для элемента

@returnsvoid

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

В следующем примере свойство disabled записывается в нативный элемент DOM:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}

Описание

Определяет интерфейс, служащий мостом между API форм Angular и нативным элементом DOM.

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