Angular设置输入框值报错：Cannot set properties of null (setting 'value')

问题场景 #

你在Angular组件的ngAfterViewInit中尝试通过document.getElementById给带有ngModel的matInput赋值时，遇到了Cannot set properties of null (setting 'value')错误，即使确认元素存在且尝试过ngOnInit也无效。

根本原因 #

Angular不推荐直接使用原生DOM操作（如document.getElementById），组件的视图封装机制、变更检测时机，或是可能存在的结构指令（如*ngIf），都会导致代码执行时DOM元素尚未被Angular完全渲染，或无法通过全局DOM查询正确获取组件封装内的元素。

正确解决方案 #

方案1：通过ngModel绑定变量赋值（推荐，符合Angular数据驱动理念） #

1. 在组件类中定义绑定变量：

export class YourComponent {
  dbName: string = '';

  ngAfterViewInit() {
    this.dbName = 'dt'; // 直接修改变量，视图会自动同步更新
  }

  isValueSelected_SQLite() {
    // 保留你的原有逻辑
    return false;
  }
}

2. 修改模板为双向绑定：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Database Name</mat-label>
  <input [disabled]="isValueSelected_SQLite()" id="numeDB_SQLite" type="text" matInput
         placeholder="Ex: Lite_DB" name="numeDB_SQLite" [(ngModel)]="dbName" required
         oninvalid="this.setCustomValidity('Please enter DB name')"
         oninput="setCustomValidity('')">
</mat-form-field>

方案2：使用@ViewChild获取输入框控件 #

如果需要直接操作DOM元素或表单控件：

1. 在组件类中引入相关依赖并定义视图引用：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild('dbNameInput') dbNameInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    if (this.dbNameInput.nativeElement) {
      this.dbNameInput.nativeElement.value = 'dt';
    }
  }

  isValueSelected_SQLite() {
    // 保留你的原有逻辑
    return false;
  }
}

2. 给模板中的输入框添加模板引用变量：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Database Name</mat-label>
  <input #dbNameInput [disabled]="isValueSelected_SQLite()" id="numeDB_SQLite" type="text" matInput
         placeholder="Ex: Lite_DB" name="numeDB_SQLite" ngModel required
         oninvalid="this.setCustomValidity('Please enter DB name')"
         oninput="setCustomValidity('')">
</mat-form-field>

额外排查点 #

如果上述方案仍无效，检查以下情况：

• 输入框是否被*ngIf、*ngFor等结构指令包裹，导致ngAfterViewInit执行时元素尚未渲染。这种情况可尝试改用ngAfterContentInit，或临时用setTimeout延迟执行（仅作排查，不推荐作为最终方案）。
• 组件是否启用了默认视图封装模式，导致全局DOM查询无法获取组件内元素。

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