Angular2 v.2.3-使用指令访问通过formControlName语法创建的FormControl

所以我想做一个指令，可以操纵FormControl

似乎如果我使用长语法在模板中声明表单控件，我可以将该控件传递给一个指令，作为直接@Input（）绑定来处理它；i、 e:使用以下模板：

<form [formGroup]="myForm">
    <input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive>
</form>

该指令如下所示：

@Directive({
    selector: "[my-directive]"
})
class MyDirective {
    Input() formControl: FormControl;
}

但是如果我在模板中使用formControlName语法：

<form [formGroup]="myForm">
    <input type="text" id="myText" formControlName="myText" my-directive>
</form>

---

我如何在指令中引用（隐式地？）生成的FormControl？

如果使用

NgControl

、

ElementRef

、

HostListener

和构造函数注入，我们可以在

formControlName

或

[FormControl]中有一个指令适用于被动表单的表单控件

伪装甚至模板驱动表单：

import { Directive, ElementRef, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  constructor(private el: ElementRef, private control : NgControl) { }

  @HostListener('input',['$event']) onEvent($event){
    let valueToTransform = this.el.nativeElement.value;
    // do something with the valueToTransform
    this.control.control.setValue(valueToTransform);
  }
}

---

这里有一个

@silentsod答案将完美无瑕

1。如果您需要处理多个事件，如按键向上/向下或任何其他事件，则可以使用以下方法
2。此外，最好在指令本身中定义事件

import { Directive, ElementRef} from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[my-directive]',
  host: {
   '(input)':'onEvent($event)',
   '(keydown.backspace)': 'onEvent($event, true)'
})
export class MyDirective {
  constructor(private el: ElementRef, private control : NgControl) { }

  public onEvent($event, someEvent){
    let valueToTransform = this.el.nativeElement.value;
    // do something with the valueToTransform
    if(someEvent) {
    //do something 
    }
    this.control.control.setValue(valueToTransform);
  }
}

在Html中

<form [formGroup]="myForm">
<input type="text" id="myText" formControlName="myText" my-directive>
</form>

不清楚你在问什么。您可以使用模板绑定的方法，

formControlName=“someName”

或

[formControl]=“myForm.controls['someName]”将指令应用于被动输入，我可以看出这两者之间没有区别。如果你发布了你的指令，为什么它对你不起作用，那么也许你可以得到答案。据我所知，formControlName语法没有将FormControl实例放在元素上，因此如果没有显式绑定，我不知道如何访问它。我已经编辑了这个问题，希望它更清楚。谢谢，我不知道NgControl。只是为了理解。。。1） 根据我们制作表单的方式，this.control将计算为FormControlDirective、FormControlName指令或NgModel指令？2） this.control.control是this.control使用的FormControl实例，在1）中列出的指令都有这个吗？3） 此.control.control中的更改将应用于此.control？（例如，this.control.control.markAsPristine（）会将this.control.pristine设置为true？）1）正确，2）也正确，但取决于您实例化控件的时间，它可能在指令构造函数中未定义（这很奇怪，但与生命周期事件相关）3）是。当指令同时充当验证程序时，这不起作用。它会导致循环依赖。@e-cloud这实际上是正常的，因为validator指令的validate方法将控件作为参数。一开始我认为“this.control.control.setValue”是一个拼写错误，所以我写了“this.control.setValue”，它没有编译
<form [formGroup]="myForm">
<input type="text" id="myText" formControlName="myText" my-directive>
</form>