Angular模板驱动表单输入有效性测试：setValue非ElementRef属性报错

你的问题核心是错误获取了DOM元素而非表单控件实例：用@ViewChild('inputValid')拿到的ElementRef只是原生DOM节点的引用，它既没有setValue方法，也不存在controls属性，这就是你触发报错的原因。

针对模板驱动表单，我们需要获取NgModel实例（Angular表单模块提供的、负责管理单个控件状态与验证的核心对象），下面是完整的正确测试方案：

1. 修正组件中的ViewChild引用 #

首先在组件代码里，把ElementRef替换为NgModel类型，并导入对应模块：

import { NgModel } from '@angular/forms';
// ...
export class PacienteDialogComponent implements OnInit {
  // 添加{ static: true }确保测试阶段能提前获取到实例
  @ViewChild('inputValid', { static: true }) inputValid: NgModel;
  // ...
}

2. 编写正确的测试代码 #

你可以通过两种方式验证输入框的有效性，按需选择：

方式一：直接修改绑定的模型值（贴近双向绑定逻辑） #

模板驱动表单基于双向绑定，直接修改paciente.nombre的值，再触发变更检测就能同步表单验证状态：

fit('If blank it should be invalid', async(() => {
  // 清空绑定的模型值
  comp.paciente.nombre = '';
  // 触发变更检测，让表单更新验证结果
  fixture.detectChanges();
  // 验证控件处于无效状态
  expect(comp.inputValid.valid).toBeFalsy();
  // 也可以通过NgModel的control属性访问FormControl实例判断
  expect(comp.inputValid.control.valid).toBeFalsy();
}));

方式二：通过FormControl设置值（模拟用户输入场景） #

如果想更贴近真实用户输入的交互逻辑，可以通过NgModel的control属性（本质是FormControl实例）来设置值：

fit('If blank it should be invalid', async(() => {
  // 通过FormControl设置空值
  comp.inputValid.control.setValue('');
  // 触发变更检测同步状态
  fixture.detectChanges();
  // 验证控件无效
  expect(comp.inputValid.valid).toBeFalsy();
}));

额外技巧：通过表单实例直接操作控件 #

如果你的组件也引用了表单本身（比如@ViewChild('editForm') editForm: NgForm;），还可以直接通过表单实例获取控件测试：

fit('If blank it should be invalid', async(() => {
  comp.editForm.controls['nombre'].setValue('');
  fixture.detectChanges();
  expect(comp.editForm.controls['nombre'].valid).toBeFalsy();
}));

记住，模板驱动表单的核心是NgModel和NgForm，它们才是管理表单状态、验证逻辑的正确入口，而非原生DOM元素。

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