Angular2 v.2.3 - Có một chỉ thị truy cập FormControl được tạo ra thông qua cú pháp formControlName

Question

Vì vậy, tôi đang cố gắng thực hiện một chỉ thị có thể thao tác một FormControl. Có vẻ như nếu tôi sử dụng cú pháp dài để khai báo các điều khiển biểu mẫu trong khuôn mẫu thay vào đó, tôi có thể chuyển điều khiển đến một chỉ thị để thực hiện các công cụ với nó như một liên kết @Input() trực tiếp; ví dụ: Với các mẫu sau:

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

Và logic thành phần sau đây:

@Component({ 
    // Properties go here. 
}) 
class MyComponent { 
    myForm: FormGroup; 

    constructor(fb: FormBuilder) { 
     // Constructor logic... 
    } 

    ngOnInit() { 
     this.myForm = this.fb.group({ 
      "myText": [""] 
     }); 
    } 
} 

Chỉ thị sẽ trông như thế:

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

Nhưng nếu tôi đang sử dụng cú pháp formControlName trong mẫu thay thế:

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

Làm cách nào để tôi tham khảo FormControl (ngầm định?) Được thực hiện trong chỉ thị?

Answer 1

Nếu bạn sử dụng NgControl, tiêm ElementRef, HostListener và xây dựng chúng ta có thể có một chỉ thị được áp dụng để tạo thành điều khiển từ hình thức phản ứng trong hai formControlName hoặc [formControl] chiêu bài và thậm chí mẫu thúc đẩy các hình thức:

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); 
    } 
} 

Dưới đây là một applicable demo

Answer 2

câu trả lời @silentsod sẽ hoạt động hoàn hảo.

1. nếu bạn cần xử lý nhiều sự kiện như bấm phím lên/xuống hoặc bất kỳ sự kiện nào khác, thì bạn có thể thực hiện theo cách tiếp cận dưới đây.
2. Ngoài ra, tốt hơn là xác định các sự kiện trong chỉ thị.

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); 
    } 
} 

Trong Html

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