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

【问题标题】：Get form control from raw element in Angular2从Angular2中的原始元素获取表单控件
【发布时间】：2017-08-13 16:31:29
【问题描述】：

假设我正在编写一个用于 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 的HostListener('onChange') 事件在用户在输入框中输入时起作用。但它不会为表单控件上调用的setValue 事件激活，即使emitEvent 设置为true。 The Angular docs on Forms 说 setValue 将导致在表单控件对象上发出 valueChanges 事件。但我不想每次使用时都将它传递给指令，因为这很笨重。

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

【问题讨论】：

标签： angular angular2-forms angular2-directives

【解决方案1】：

对我有用的是

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

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

【讨论】：

【解决方案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)=>{
       ...
    });
  }
};

【讨论】：

【解决方案3】：

Angular DI 助你一臂之力！

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

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

  }
};

为什么会这样：

Angular 将指令注册到指令所附加到的元素的注入器中。因此，当您请求特定指令的实例时，第一次查找将首先在主机元素上。 （同样适用于组件）

【讨论】：

当我这样做时，我得到了一个No provider for FormControl!，并且我将FormsModule 导入到我的模块中。当我将FormControl 添加到模块的providers 部分时，我得到Syntax error Can't resolve all parameters for FormControl: (?, ?, ?). at SyntaxError.BaseError
你的应用是否被分成了多个 NgModule？
是的。我也尝试将我的指令导入到顶部的 AppModule 中，但是当我尝试使用它时并没有使用它，所以我有一个导出它的模块，然后在模板中应用它的模块正在导入该模块。
哪个模块正在导入FormModule？您的 AppModule、声明 MyHighlightDirective 的模块、包含使用 MyHighlightDirective 的组件的模块或其他刚刚导出的共享模块？
MyHighlightDirective 正在导入它，并且在其模板中有输入的模块也在导入它。