Setzen Sie einen Fokus-Zustand auf ein Feld + Winkel 4

Question

Ich habe ein Problem im Zusammenhang mit Fokus. Was ich brauche ist, einen Fokus-Zustand über ein Feld in der onInit-Funktion der Komponente, dem ersten Feld, zu setzen. aber ich kann das Feld nicht richtig zielen.

i

export class EgrCrearRecetaComponent implements OnInit { 
    @ViewChild('paciente') ePaciente; 
    ... 
} 

und in der onInit Funktion

ngOnInit() { 
    this.buildForm(); 
    // try to set 
    this.ePaciente.nativeElement.focus(); 
    ... 
    } 

das ist, was ich zu sagen vergessen, ich bin mit reaktiven Formen versucht haben, so `t i #paciente zu verwenden, ich verwende

<input type="text" pInputText formControlName="paciente" class="form-control" placeholder="Dni Paciente"> 

Thsi ist die Formbuilder-Struktur in der Komponente:

buildForm(): void { 
this.recetaform = this.fb.group({ 
    paciente: ['', [<any>Validators.required, <any>Validators.minLength(7), <any>Validators.maxLength(9)]], 
    femision: [this.fechaHoy(), [<any>Validators.required]], 
    servicio: ['', [<any>Validators.required]], 
    idServicio: ['', [<any>Validators.required]], 
    turno: ['', [<any>Validators.required]], 
    prestador: ['', [<any>Validators.required]], 
    idPrestador: ['', [<any>Validators.required]], 
    diagnostico: ['', [<any>Validators.required]], 
    idDiagnostico: ['', [<any>Validators.required]], 
    productofgn: this.fb.group({ 
    cb: [''], 
    producto: [''], 
    lote: [''], 
    cant: [''], 
    dias: [''], 
    }) 
}); 

}

Leider Freunde. Ich bekomme den gleichen Fehler immer wieder.

ERROR Typeerror: kann nicht lesen Eigenschaft 'nativeElement' undefinierter

Answer 1

Konzentrieren Sie Ihre Feld nach Ansicht initialisiert wurde:

ngAfterViewInit(){ 
    // Work around for "ExpressionChangedAfterItHasBeenCheckedError" 
    setTimeout(()=> { this.ePaciente.nativeElement.focus() }, 10); 
} 

Hier ist ein funktionierendes Plunker Demo

Answer 2

Move it zu AfterViewChecked()

... 
import { AfterViewChecked} from '@angular/core'; 
.. 

export class EgrCrearRecetaComponent implements OnInit, AfterViewChecked { 
.... 
toFocus=true; 
ngAfterViewChecked() { 
    if (this.toFocus) { 
     this. ePaciente.nativeElement.focus(); 
    } 
    this.toFocus = false; 
} 

Answer 3

Sie sollten eine andere verwenden r Komponenten-Lebenszyklus-Hook - ngAfterViewInit wie es ausgelöst wird, sobald seine Ansicht und seine untergeordneten Ansichten initialisiert werden.
https://angular.io/guide/lifecycle-hooks

Auch innerhalb dieser Callback-Anwendung SetTimeout Haken sicher zu sein, dass die ersten Detektions sind Möglichkeit zu laufen hatten Veränderungen und Elemente (so wie fokussierbar Eingang) wiedergegeben. Sie müssen den Verzögerungsparameter nicht angeben, da Sie nur auf den nächsten Tick warten möchten.

ngAfterViewInit() { 
    setTimeout(() => { 
     this.ePaciente.nativeElement.focus(); 
    }); 
}