Angular2 v.2.3 - 让指令访问通过 formControlName 语法创建的 FormControl [英] Angular2 v.2.3 - Have a directive access a FormControl created through formControlName syntax
问题描述
所以我正在尝试制作一个可以操作 FormControl 的指令.
So I'm trying to make a directive that can manipulate a FormControl.
看来,如果我在模板中使用长语法来声明表单控件,我可以将控件传递给一个指令,以将其作为直接@Input() 绑定;即:使用以下模板:
It seems that if I use the long syntax for declaring form controls in the template instead, I can pass the control to a directive to do stuff with it as a direct @Input() bind; i.e.: With the following template:
<form [formGroup]="myForm">
<input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive>
</form>
以及以下组件逻辑:
@Component({
// Properties go here.
})
class MyComponent {
myForm: FormGroup;
constructor(fb: FormBuilder) {
// Constructor logic...
}
ngOnInit() {
this.myForm = this.fb.group({
"myText": [""]
});
}
}
指令看起来像:
@Directive({
selector: "[my-directive]"
})
class MyDirective {
Input() formControl: FormControl;
}
但如果我在模板中使用 formControlName 语法:
But if I were using the formControlName syntax in the template instead:
<form [formGroup]="myForm">
<input type="text" id="myText" formControlName="myText" my-directive>
</form>
我将如何在指令中引用(隐式?)制作的 FormControl?
How would I reference the (implicitly?) made FormControl in the directive?
推荐答案
如果你使用 NgControl
、ElementRef
、HostListener
和构造函数注入我们可以有一个指令适用于 formControlName
或 [formControl]
伪装甚至模板驱动形式的反应形式的表单控件:
If you utilize NgControl
, ElementRef
, HostListener
and constructor injection we can have a directive applicable to form controls from reactive forms in either formControlName
or [formControl]
guise and even template driven forms:
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);
}
}
这是一个适用演示
这篇关于Angular2 v.2.3 - 让指令访问通过 formControlName 语法创建的 FormControl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!