使用FormControl时ngAfterViewInit中@ViewChild返回undefined的问题

问题原因 #

Nebular的nbInput指令会对原生<input>元素进行封装，直接通过ElementRef获取标记为#inputField的元素时，无法正确拿到实例，导致返回undefined。

解决方案 #

方法1：通过NbInputDirective获取元素 #

1. 导入NbInputDirective：

import { NbInputDirective } from '@nebular/theme';

2. 修改@ViewChild的类型为NbInputDirective，通过指令实例访问原生元素：

@ViewChild('inputField') inputField: NbInputDirective;

ngAfterViewInit(): void {
  console.log(this.inputField.nativeElement);
}

方法2：指定读取ElementRef #

如果需要直接获取ElementRef，在@ViewChild中添加read配置项明确读取原生元素引用：

@ViewChild('inputField', { read: ElementRef }) inputField: ElementRef;

ngAfterViewInit(): void {
  console.log(this.inputField.nativeElement);
}

额外检查点 #

若以上方法仍无效，确认以下内容：

• 输入框没有被*ngIf、*ngFor等条件渲染指令包裹（这类指令会延迟元素初始化，导致ngAfterViewInit时元素未创建）
• 当前模块已正确导入NebularInputModule

内容的提问来源于stack exchange，提问作者Ibrahim Hassan