如何测试Angular 4字段异步验证器？验证异常问题求助

我来帮你分析下你遇到的问题，主要有两个关键点导致控件状态为invalid但errors为null，同时给你提供完整的解决方案和测试代码示例：

问题根源 #

1. 表单控件配置错误：你把异步验证器放到了同步验证器的Validators.compose里，还使用了Angular 4中已废弃的Validators.composeAsync。Angular里FormControl的构造参数是[初始值, 同步验证器数组, 异步验证器数组]，异步验证器需要单独放在第三个参数中。
2. 未推进异步任务执行：在fakeAsync测试中，异步验证器返回的Observable是异步执行的，你需要手动调用tick()（或flush()）来模拟时间流逝，让异步任务完成，之后再触发变更检测，Angular才会更新控件的errors属性。

完整代码示例 #

1. 异步验证器服务 #

import { Injectable } from '@angular/core';
import { AsyncValidator, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class EmailValidator implements AsyncValidator {
  validateEmail(control: AbstractControl): Observable<ValidationErrors | null> {
    // 模拟禁止的域名列表
    const forbiddenDomains = ['yahoo.com'];
    const email = control.value as string;

    if (!email) {
      return of(null);
    }

    const domain = email.split('@')[1];
    if (forbiddenDomains.includes(domain)) {
      // 模拟异步请求延迟，贴近真实场景
      return of({ invalidDomain: '该域名不允许注册' }).pipe(delay(100));
    }

    return of(null);
  }
}

2. 表单组件 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EmailValidator } from './email.validator';

@Component({
  selector: 'app-email-form',
  template: `
    <form [formGroup]="emailForm">
      <input type="email" id="email" formControlName="email" placeholder="请输入邮箱">
    </form>
  `
})
export class EmailFormComponent {
  emailForm: FormGroup;

  constructor(private fb: FormBuilder, private emailValidator: EmailValidator) {
    this.emailForm = this.fb.group({
      email: [
        '',
        [Validators.required, Validators.email], // 同步验证器数组
        [this.emailValidator.validateEmail.bind(this.emailValidator)] // 异步验证器数组
      ]
    });
  }

  // 方便获取邮箱控件
  get email() {
    return this.emailForm.get('email');
  }
}

3. 测试代码 #

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { EmailFormComponent } from './email-form.component';
import { EmailValidator } from './email.validator';

describe('EmailFormComponent', () => {
  let component: EmailFormComponent;
  let fixture: ComponentFixture<EmailFormComponent>;
  let emailInput: HTMLInputElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [EmailFormComponent],
      providers: [EmailValidator]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(EmailFormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    emailInput = fixture.nativeElement.querySelector('#email');
  });

  it('当使用禁止域名时，邮箱控件应标记为无效并返回错误', fakeAsync(() => {
    // 设置输入值
    emailInput.value = 'user@yahoo.com';
    // 触发input事件通知表单值变化
    emailInput.dispatchEvent(new Event('input'));
    // 触发变更检测更新表单值
    fixture.detectChanges();

    // 推进时间，让异步验证器的Observable完成（对应验证器中的delay时间）
    tick(100);
    // 再次触发变更检测，让Angular更新控件状态和errors
    fixture.detectChanges();

    const emailControl = component.email;
    expect(emailControl.valid).toBeFalse();
    expect(emailControl.errors).not.toBeNull();
    expect(emailControl.errors?.invalidDomain).toBe('该域名不允许注册');
  }));

  it('当使用允许域名时，邮箱控件应标记为有效', fakeAsync(() => {
    emailInput.value = 'user@gmail.com';
    emailInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    tick(100);
    fixture.detectChanges();

    const emailControl = component.email;
    expect(emailControl.valid).toBeTrue();
    expect(emailControl.errors).toBeNull();
  }));
});

关键修复点说明 #

• 把异步验证器从同步验证器数组中移出，单独作为FormControl的第三个参数传入。
• 在fakeAsync测试中，调用tick()推进时间，确保异步验证器的Observable完成，之后再触发变更检测，这样就能正确获取到errors属性了。

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