Question

我的表单中的某个字段有一个异步验证器。

this.registrationForm = this.formBuilder.group({
  ....
  partnerCode: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(6)], this.partnerCodeAvailabilityValidator.bind(this)],
})

这是验证器的代码：

partnerCodeAvailabilityValidator(control: AbstractControl) {
 return this.partnerService.getPartner(this.partner.userId, control.value).map(res => {
  if (Util.isNotNull(res) && Util.isNotNull(res.code) && this.partner.userId !== res.userId) {
    return { partnerCodeTaken: true }
  } else {
    return null
  }
 })
}

在测试期间，即使我发送可用的合作伙伴代码，表单仍会显示partnerCode条目的错误

如果我删除异步表单验证器，则测试成功通过

如何确保测试等待来自异步表单验证程序的判决，然后再给出响应？

Answer 1

异步验证器不返回值。因此，您需要模拟来自异步验证器的响应。因此，首先我们从任何formcontrol中清除异步验证器，然后添加一个模拟异步验证器

在测试中添加：

component.registrationForm.controls['partnerCode'].clearAsyncValidators()
component.registrationForm.controls['partnerCode'].setAsyncValidators(mockPartnerCodeAvailabilityValidator.bind(this))

mockPartnerCodeAvailabilityValidator代码为：

import { AbstractControl } from '@angular/forms'

export async function mockPartnerCodeAvailabilityValidator(control: AbstractControl) {
 return new Promise((resolve, reject) => {
  let nonAvailablePartnerCodes = ['SVEINS']
  if (nonAvailablePartnerCodes.includes(control.value)) {
    resolve({ partnerCodeTaken: true })
  } else {
    resolve(null)
  }
})
}

Angular Formbuilder使用Async Validator进行测试

1 个答案: