Angular表单提交时校验失败，查询ng-invalid返回空HTMLCollection

问题诱因 #

• 响应式表单的值完全由FormControl实例管理，你在模板input标签上写的原生value属性绑定{{user?.xxx}}不会同步到FormControl中，所有控件的FormControl值始终是初始化时的空字符串，带Validators.required校验的firstname、lastname字段自然始终校验不通过，这也是你打印表单值为空的核心原因。
• Angular默认只有当表单控件被用户触碰（touched状态）或表单提交后，才会给无效控件添加ng-invalid类，你未触发控件交互就直接查询DOM，自然返回空集合。
• 额外注意：你模板中姓（Nom）对应的formControlName="lastname"绑定的value是user?.firstName，名（Prénom）对应的formControlName="firstname"绑定的value是user?.lastName，存在姓和名的赋值逻辑颠倒的问题。

解决方案 #

1. 删掉模板中所有input标签上的value="{{user?.xxx}}"属性，改用响应式表单的官方赋值方法，在拿到user数据后调用patchValue批量给表单赋值：

// 你获取到user数据后执行以下代码
this.myForm.patchValue({
  // 注意修正姓和名的对应关系，根据你的业务逻辑调整赋值
  firstname: this.user?.lastName,
  lastname: this.user?.firstName,
  mail: this.user?.mail,
  username: this.user?.userName,
  login: this.user?.login,
  password: this.user?.password,
  // 后续取消子组件注释后，可在此处补充gender、useraccountType的赋值
});

2. 不需要通过查询DOM的方式定位无效字段，直接在提交逻辑中遍历FormGroup的控件即可快速定位无效字段：

updateUserAccount(formValue: any) {
  // 提交前标记所有控件为已触碰，触发校验状态更新
  this.myForm.markAllAsTouched();
  if (this.myForm.invalid) {
    // 遍历打印所有无效字段
    Object.keys(this.myForm.controls).forEach(controlKey => {
      const control = this.myForm.get(controlKey);
      if (control?.invalid) {
        console.log('无效字段：', controlKey, '错误信息：', control.errors);
      }
    });
    return;
  }
  // 表单有效，执行后续提交逻辑
}

3. 如果确实需要通过DOM查询无效字段，执行上面代码的this.myForm.markAllAsTouched()之后再查询document.getElementsByClassName('ng-invalid')就能拿到对应元素。

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