Невозможно обновить значение атрибута в угловой директиве

Question

Я написал директиву атрибута для отображения класса ошибок.

import { Directive, ElementRef, Renderer, Input, HostBinding } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
  selector: "[appErrorClass]"
})
export class ErrorClasseDirective {
  @Input('control') control: FormControl;

  constructor(
    private el: ElementRef,
    private renderer: Renderer
    ) {
  }

  ngOnInit(): void {
    console.log(this.control)
  }
}

FormControl идет от контроллера работает. Но я не могу получить обновление управления формой в пользовательской директиве. Я прошел контроль, как это.

<div appErrorClass [control]="userForm.get('email')">

Но я не могу получить обновленный статус FormControl в директиве.

Пожалуйста, помогите кому-нибудь решить эту проблему. Заранее спасибо.

Answer 1

, как уже было сказано, вам нужно подписать valueChanges FormControl. Пожалуйста, не забудьте отменить подписку, когда ваша директива уничтожена.

Вот рабочий пример: https://stackblitz.com/edit/angular-mjz363

Answer 2

Нет необходимости передавать элемент управления с помощью привязки свойства Input. Используйте NgControl

Базовый класс, который расширяет все управляющие директивы на основе FormControl. Это связывает объект FormControl с элементом DOM.

Впрыскивая NgControl, вы можете получить доступ к форме ControlValue

import { Directive,Input, HostBinding } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
  selector: '[appAppError]'
})
export class AppErrorDirective {
  constructor(private control: NgControl) { }
  ngOnInit() {
    this.control.statusChanges.subscribe((e) => {
      console.log({
        valid: this.control.valid,
        dirty: this.control.dirty,
        touched: this.control.touched
      });
    });
  }

}

Пример: https://stackblitz.com/edit/ngcontrol-status-changes-d2mcsp