从 Angular2 中的原始元素获取表单控件

Question

假设我正在编写用于 Angular2 表单元素的自定义属性指令。我希望能够像这样使用我的属性：

<form [formGroup]="myFormGroup">
  <input type="text" [myHighlight] formControlName="name" />
</form>

在我的指令中我有这样的东西：

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
};

但现在假设我想对输入控件的所有更改执行某些操作。也许我想在每次更改时随机化颜色。

来自 Angular2 guide works when the user is typing into the input box. But it doesn't get activated for setValue events that are called on the form control, even with emitEvent set to true. The Angular docs on Forms 的 HostListener('onChange') 事件表示 setValue 将导致在表单控件对象上发出 valueChanges 事件。但我不想每次使用它时都将它传递给指令，因为那很笨重。

如果指令只有元素引用，是否还有其他方法可以访问原始表单控件？

Answer 1

Angular DI 来救援！

您可以使用 Angular 依赖注入系统来注入附加到指令的宿主元素的 FormControl。

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef, private formControl: FormControl) {
    // have fun with formControl.valueChanges
    .......

  }
};

为何有效：

Angular 将指令注册到指令所附加的元素的注入器中。因此，当您请求特定指令的实例时，第一个查找将首先在宿主元素上进行。 （组件同理）

Answer 2

注入 FormControlName 类型的 NgControl

import { NgControl } from '@angular/forms';

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef, private formControl: NgControl) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
    ....
    //listen to validation status
    this.formControl.statusChanges.subscribe((state)=>{
       ...
    });
  }
};

Answer 3

对我有用的是

@ContentChild(NgModel)
public set model(model: NgModel) {
    ...
}

并且您可以使用 model.control 访问控件。

从 Angular2 中的原始元素获取表单控件

Get form control from raw element in Angular2

angular2-forms

angular2-directives

angular