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