used - formgroup angular 6

Angular2 v.2.3-Tener una directiva para acceder a un FormControl creado a través de la sintaxis de formControlName

Question

Así que estoy tratando de hacer una directiva que pueda manipular un control de formulario.

Parece que si utilizo la larga sintaxis para declarar los controles de formulario en la plantilla, puedo pasar el control a una directiva para hacer cosas con él como un enlace directo @Input (); Es decir: con la siguiente plantilla:

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

Y la siguiente lógica de componentes:

@Component({
// Properties go here.
})
class MyComponent {
myForm: FormGroup;
constructor(fb: FormBuilder) {
// Constructor logic...
}
ngOnInit() {
this.myForm = this.fb.group({
"myText": [""]
});
}
}

La directiva se vería como:

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

Pero si estuviera usando la sintaxis de formControlName en la plantilla en su lugar:

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

¿Cómo me referiría a FormControl hecho en la directiva (implícitamente)?

Answer 1

La respuesta de @silentsod funcionaría perfectamente.

1. Si necesita manejar múltiples eventos, como presionar las teclas hacia arriba / abajo o cualquier otro evento, puede continuar con el siguiente enfoque.
2. Además, es mejor definir eventos en la propia directiva.

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

En el html

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

Answer 2

Si utiliza NgControl , ElementRef , HostListener y la inyección del constructor, podemos tener una directiva aplicable a los controles de formularios de los formularios reactivos en formControlName o en la forma [formControl] e incluso en formas controladas por plantillas:

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

Aquí hay una demo aplicable