將焦點狀態設置爲字段+角度4

我有焦點相關的問題。我需要的是在組件的onInit函數中的第一個字段上設置焦點狀態。但我無法正確瞄準這個領域。將焦點狀態設置爲字段+角度4

我曾嘗試

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

，並在OnInit功能

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

這是我忘了告訴，我使用的反應形式，所以我不能老是用#paciente，我使用

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

thsi是在部件的formbuilder結構：

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: [''], 
    }) 
});

}

對不起朋友。我一遍又一遍地得到相同的錯誤。

錯誤類型錯誤：無法讀取的不確定

來源

2017-08-28 Pablo Cabrol

財產 'nativeElement' 關注你的視場已被初始化後：

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

這裏是一個工作Plunker Demo

來源

2017-08-28 13:06:53 Faisal

它的工作原理，但在控制檯我得到了：錯誤TypeError：無法讀取此字段未定義的屬性'nativeElement'。多次！！！ –

你怎麼定義'ePaciente'？你能否更新我提供的plunker鏈接中的代碼？我沒有得到任何錯誤 – Faisal

將它移動到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; 
}

來源

2017-08-28 13:08:27 Vega

這對你有幫助嗎？ – Vega

您應該使用其他r組件生命週期鉤 - ngAfterViewInit，因爲它的視圖及其子視圖被初始化後立即被觸發。
https://angular.io/guide/lifecycle-hooks

也是鉤子回調使用的setTimeout內，以確保所述第一變化檢測有機會運行和元素呈現（以便可聚焦的輸入）。您不必指定延遲參數，因爲您只想等待下一個打勾。

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

來源

2017-08-28 13:38:20 Krzysiek

將焦點狀態設置爲字段+角度4

回答

相關問題