angular - formcontrolname - ¿Es posible obtener elemento nativo para formControl?

formcontrol set value angular 6

Question

Tengo forma reactiva Angular2. formControl y lo formControl a los campos de entrada mediante [formControl]=... Según tengo entendido, crea el nativeElement <-> formControl .

Mi pregunta: ¿es posible obtener nativeElement para formControl ? Quiero hacer algo como myFormControl.nativeElement.focus()

Answer 1

El código a continuación no funciona con el enlace de ngModel puro, así que hice muchos experimentos. Lo último, también confirmado por Maximillian Schwarzmuller debería ser el siguiente:

@Directive({
selector: ''[ngModel]'', // or ''input, select, textarea'' - but then your controls won''t be handled and also checking for undefined would be necessary
})
export class NativeElementInjectorDirective {
constructor(private el: ElementRef, private control : NgControl) {
(<any>control.control).nativeElement = el.nativeElement;
}
}

Por lo tanto, si esta directiva se proporciona y se exporta en el módulo principal, adjuntará una propiedad nativa de Elemento personalizada a todos los FormControl .

Es una pena que no salga de la caja ...

Answer 2

Puedo compartir una solución terrible pero funciona para mí.

En formas reactivas podemos utilizar cualquiera

1) FormControlDirective

ts

myControl = new FormControl('''')

modelo

<input type="text" [formControl]="myControl">

o

2) FormControlName

ts

myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
foo: ''''
});
}

modelo

<form [formGroup]="myForm">
<input type="text" formControlName="foo">
</form>

Así que para estas directivas podría escribir un parche como

1) FormControlDirective

const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
FormControlDirective.prototype.ngOnChanges = function() {
this.form.nativeElement = this.valueAccessor._elementRef.nativeElement;
return originFormControlNgOnChanges.apply(this, arguments);
};

2) FormControlName

const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
FormControlName.prototype.ngOnChanges = function() {
const result = originFormControlNameNgOnChanges.apply(this, arguments);
this.control.nativeElement = this.valueAccessor._elementRef.nativeElement;
return result;
};

Después de eso podemos acceder fácilmente al elemento nativo que tiene la instancia de FormControl

1) FormControlDirective

focusToFormControl() {
(<any>this.myControl).nativeElement.focus();
}

2) FormControlName

focusToFormControlName(name) {
(<any>this.myForm.get(name)).nativeElement.focus();
}

Ejemplo de Plunker

Answer 3

Se ha agregado una solución menor a la respuesta de baHI (la lógica se movió a OnInit). El error mencionado en los comentarios probablemente esté relacionado con cambios en los formularios. Esta respuesta es para "@ angular / forms": "~ 7.1.0",

 @Directive({
selector: ''[ngModel]''
})
export class NativeElementInjectorDirective implements OnInit {
constructor (private el: ElementRef, private control : NgControl) {}
ngOnInit(){
(this.control.control as any).nativeElement = this.el.nativeElement;
}
}