在Angular中,当FormControl的blur事件触发时,异步验证器获取的确实是旧值。这是因为blur事件触发时,FormControl的值尚未更新。
要解决这个问题,可以使用valueChanges观察FormControl的值的变化,并在值变化时进行异步验证。
下面是一个示例代码:
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
Async validation failed
`,
})
export class ExampleComponent {
myControl = new FormControl('', null, this.asyncValidator);
asyncValidator(control: FormControl) {
return new Promise(resolve => {
setTimeout(() => {
if (control.value === 'old value') {
resolve({ asyncValidator: true });
} else {
resolve(null);
}
}, 2000); // 模拟异步验证
});
}
validateAsync() {
this.myControl.updateValueAndValidity(); // 更新值和验证状态
// 可以在这里订阅FormControl的valueChanges,获取最新的值进行异步验证
this.myControl.valueChanges.subscribe(value => {
this.myControl.updateValueAndValidity(); // 更新值和验证状态
});
}
}
在上面的示例代码中,我们在FormControl的blur事件中调用validateAsync方法进行异步验证。在validateAsync方法中,我们先调用updateValueAndValidity方法来更新FormControl的值和验证状态。然后,在valueChanges的订阅回调函数中,我们再次调用updateValueAndValidity方法来获取最新的值并进行验证。
这样,就可以确保在blur事件后异步验证器获取的是最新的值。
上一篇:Angular的formcontrol下拉框在页面刷新时无法记住选择
下一篇:angular的formControl值变化不起作用([formControl].valueChanges)不起作用。