在Angular 11中,当异步验证器返回true时触发无尽的请求循环的问题通常是由于验证器函数没有正确处理验证结果的情况下引起的。以下是一个包含代码示例的解决方案:
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
// 异步验证器函数
const myAsyncValidator = (control: FormControl): Observable => {
return someAsyncValidation().pipe(
map(result => {
// 处理验证结果
if (result === true) {
// 验证通过
return null;
} else {
// 验证失败
return { asyncValidationFailed: true };
}
})
);
};
updateValueAndValidity
方法来重新验证表单控件的状态。import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
myControl: ['', [], [myAsyncValidator]]
});
this.myForm.get('myControl').valueChanges.subscribe(() => {
// 当值发生变化时,重新验证表单控件
this.myForm.get('myControl').updateValueAndValidity();
});
}
}
通过在值变化时手动调用updateValueAndValidity
方法,可以确保在异步验证器返回true时,表单控件的状态会被正确更新,从而阻止无尽的请求循环。
上一篇:Angular 11向.Net Core后端发起PDF的POST请求
下一篇:Angular 11与任何版本的ngx chess-board都无法正常工作,但与@angular/cdk: "^12.2.9"版本却可以正常工作。