Angular自定义验证指令测试未触发，输入值无法同步问题

直接修改input的DOM值后验证器拿不到正确值，根源是DOM值没同步到Angular的FormControl里。Angular表单依赖input事件同步DOM和控件模型，只改DOM值不触发事件，控件模型还是初始空值，验证器自然读不到真实输入。

正确操作步骤 #

1. 同步DOM值到控件模型
   设置input的value后，必须触发input事件，让Angular更新FormControl的模型值：

const input = fixture.nativeElement.querySelector('input');
input.value = 'something-invalid';
input.dispatchEvent(new Event('input')); // 这步是核心，不能省略
fixture.detectChanges();

2. 触发验证器执行
   值同步完成后，再通过事件或手动方法触发验证：

• 触发blur事件（适配指令绑定的blur触发逻辑）：

input.dispatchEvent(new Event('blur'));
fixture.detectChanges();

• 或者手动更新控件状态：

const control = fixture.componentInstance.form.get('yourControlName');
control?.markAsDirty();
control?.updateValueAndValidity();
fixture.detectChanges();

3. 验证器内正确取值
   确保自定义验证器从FormControl的value属性获取值，不要直接读取DOM：

export function myCustomValidator(control: AbstractControl): ValidationErrors | null {
  const inputValue = control.value;
  if (inputValue?.includes('invalid')) {
    return { invalidContent: true };
  }
  return null;
}

完整测试代码示例 #

it('should trigger validator with real input value', () => {
  const input = fixture.nativeElement.querySelector('input');
  // 同步DOM值到控件模型
  input.value = 'something-invalid';
  input.dispatchEvent(new Event('input'));
  fixture.detectChanges();

  // 触发验证逻辑
  input.dispatchEvent(new Event('blur'));
  fixture.detectChanges();

  // 验证结果
  const control = fixture.componentInstance.form.get('testControl');
  expect(control?.hasError('invalidContent')).toBe(true);
  expect(control?.value).toBe('something-invalid');
});

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