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

正如已经告诉您的那样，

您需要订阅FormControl的valueChanges。当您的指令被销毁时，请不要忘记取消显示它。

这是一个有效的示例： https://stackblitz.com/edit/angular-mjz363

Answer 2

无需使用输入属性绑定传递表单控件。使用NgControl

所有基于FormControl的控制指令扩展的基类。它将FormControl对象绑定到DOM元素。

注入NgControl可以访问formControlValue

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

无法更新Angular指令中的属性值

2 个答案: