在Angular 9中进行异步验证的解决方法如下所示:
首先,在你的组件中定义一个表单控件和一个异步验证函数。
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
template: `
`,
})
export class MyComponent {
myForm = new FormGroup({
myControl: new FormControl('', null, this.asyncValidator),
});
asyncValidator(control: FormControl) {
return new Promise((resolve) => {
setTimeout(() => {
if (control.value === 'invalid') {
resolve({ async: true });
} else {
resolve(null);
}
}, 2000);
});
}
}
在上面的代码中,我们使用了Angular的响应式表单模块(@angular/forms
)来创建一个表单,其中包含一个名为myControl
的文本输入框。我们在FormControl
的构造函数中传入了自定义异步验证函数asyncValidator
。
在asyncValidator
函数中,我们使用setTimeout
模拟了一个异步操作,当输入值为'invalid'时,返回一个包含错误信息的 Promise 对象,否则返回 null。
在模板中,我们使用了Angular的条件语句*ngIf
来根据控件的验证状态显示相应的错误信息。
这样,当用户输入'invalid'时,会触发异步验证,并在2秒后显示相应的错误信息。