Angular Reactive Form单元测试：HTML值与控件值不同步问题

问题根因 #

Angular单元测试使用的测试模块是完全隔离的，不会自动继承项目全局AppModule的配置。你只在AppModule中导入了ReactiveFormsModule，但测试模块没有引入该依赖，导致测试环境无法识别[formGroup]、formControlName等响应式表单指令，自然无法完成表单控件和UI元素的值同步。

修复方案 #

修改你的单元测试代码，给测试模块补充导入ReactiveFormsModule即可：

1. 首先在测试文件头部引入依赖：

import { ReactiveFormsModule } from '@angular/forms';

2. 在TestBed.configureTestingModule配置中添加imports项：

await TestBed.configureTestingModule({
    declarations: [UserComponent],
    imports: [ReactiveFormsModule], // 新增这一行
    providers: [FormBuilder]
})
.compileComponents();

可选优化 #

你的组件代码里有两处多余逻辑，可以直接删掉：

• initLoginForm方法中，FormBuilder.group初始化时已经传入了默认值，后续调用setValue、updateValueAndValidity完全冗余，没有任何作用
• ngOnInit中订阅username的valueChanges后又调用patchValue给username赋值，属于监听自身变化再给自己赋值的无效逻辑，还可能触发死循环，直接删除该段订阅代码即可

修改完成后重新运行测试，表单值和UI的同步逻辑即可正常工作，两个测试用例都会通过。

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