Question

所以我正在尝试制作一个可以操作FormControl的指令。

似乎如果我使用长语法来声明模板中的表单控件，我可以将控件传递给指令，以便将其作为直接@Input（）绑定;即：使用以下模板：

<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语法：

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

我如何在指令中引用（隐式？）make FormControl？

Answer 1

如果您使用NgControl，ElementRef，HostListener和构造函数注入，我们可以使用适用于formControlName或{{1}中的被动表单的表单控件的指令伪装甚至是模板驱动的形式：

[formControl]

这里是applicable demo

Answer 2

@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>

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

2 个答案: