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

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

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

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

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

自定义异步验证器的示例

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

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

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

validateStockSymbol = (control: 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) => stock.symbol. startswith (symbol)
) ?null:{错误:'没有找到匹配的符号'}
）
}；

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

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

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

在HTML模板中，我们用下面的变量向用户显示反馈FormControl：

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

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

您可以找到完整的代码示例就在斯塔克布利茨：

我们还可以将验证器转换为指令，以便它使用中描述的机制与模板驱动的表单一起工作本教程．

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习并熟悉Angular。

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

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．