Angular实现keyup邮箱校验时报HTMLElement|null不可赋值给HTMLElement错误

报错原因 #

• 第一个问题：document.getElementById() 方法的返回值类型是 HTMLElement | null，TypeScript 严格模式下不允许将可能为 null 的值直接赋值给明确声明为 HTMLElement 类型的变量，所以你给error变量赋值的时候触发了类型错误。
• 第二个问题：你把EmailValidation函数定义在ngOnInit的内部作用域里，原生onkeyup绑定的是全局作用域的函数，根本访问不到这个内部函数，就算解决了类型错误也没法触发校验逻辑，而且Angular项目不推荐直接操作DOM、用原生事件绑定，不符合Angular的开发规范。

修复方案 #

1. 推荐解法：遵循Angular开发规范调整代码 #

用Angular原生的事件绑定、数据双向绑定替换原生DOM操作，代码可维护性更高

TypeScript逻辑调整

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mynform',
  templateUrl: './mynform.component.html',
  styleUrls: ['./mynform.component.css']
})
export class MynformComponent implements OnInit {
  // 声明绑定用的变量
  email: string = '';
  errorMsg: string = '';
  // 把正则抽成私有常量
  private readonly emailReg: RegExp = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

  constructor() { }

  ngOnInit(): void {}

  // 把校验方法提升为组件类的公开方法
  emailValidation(): void {
    this.errorMsg = '';
    if (!this.emailReg.test(this.email.trim())) {
      this.errorMsg = "请输入符合格式的有效邮箱地址";
    }
  }
}

HTML模板调整

<input 
  type="text" 
  name="email" 
  class="notify" 
  autocomplete="off" 
  [(ngModel)]="email"
  (keyup)="emailValidation()" 
/>
<span id="error">{{errorMsg}}</span>

注意：如果使用ngModel双向绑定，需要先在当前组件所属的模块中导入FormsModule。

2. 最小改动解法：仅修复类型报错 #

如果你坚持要保留原来的DOM操作写法，只需要给可能为null的返回值加非空断言!即可，告诉TypeScript这个元素肯定存在、不会为null：

var error: HTMLElement = document.getElementById("error")!;

该方案仅解决类型报错，不修复事件无法触发的作用域问题，非常不推荐在Angular项目中使用。

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