有时，我们需要将服务器端信息转换为浏览器中的有效表单数据。角的AsyncValidators是在Angular中实现这种异步验证的方法。

如果你熟悉的话Angular中的自定义表单验证，您知道自定义验证器是带有AbstractControl作为参数，如果没有验证错误则返回null，或者一个描述错误的对象:

接口ValidatorFn｛
(c:AbstractControl)：ValidationErrors|零
｝

对于异步验证器，方法是相同的。唯一的区别是验证器函数返回一个Observable或一个ValidationErrors的Promise或null，转换成下面复杂的函数签名:

接口AsyncValidatorFn｛
(控制:AbstractControl):Promise | Observable
｝

自定义异步验证器的示例

在本例中，我们希望创建一个表单输入，用户可以在其中输入股票交易所的股票代码。然后调用API来检查符号是否存在。如果不存在，则显示一条错误消息。另一方面，如果它存在，一切都是好的。

注意异步任务运行时的PENDING验证状态:

下面是上面例子背后的自定义验证器函数:

validateStockSymbol =(控件:AbstractControl) => {
const symbol = control.value.toUpperCase();
Const url = ' https://finnhub.io/api/v1/search?q=${symbol} ';
返回this.http.get < > (url) .pipe (
地图((res) = >
res .result ? (
(股票)= > stock.symbol.startsWith(符号)
) ?null:{错误:“没有找到匹配的符号”}
）
}；

如您所见，我们发出一个HTTP请求，细化结果，如果找到符号或对象，则返回null{错误:“没有找到匹配的符号”}如果没有找到的话。

然后我们用以下代码将验证器函数插入到文本输入中:

导出类AppComponent {
myControl = new FormControl(");构造函数(私有http: HttpClient) {
this.myControl.addAsyncValidators (this.validateStockSymbol);
｝

在HTML模板中，我们使用从我们的FormControl：

< p >验证状态:{{myControl。statusChanges |异步}} < / p >< p >验证错误:{{myControl.errors ? . error}} < / p >

这是它!您可以将此方法应用于任何基于HTTP请求的自定义异步表单验证。

您可以找到完整的代码示例在Stackblitz：

我们还可以将验证器转换为指令，这样它就可以使用中描述的机制来处理模板驱动的表单本教程．

我的名字是betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习和适应Angular。

如果你在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请为它鼓掌或分享。感谢您的帮助。你也可以点击这里订阅Medium．