期望验证器返回Promise或可观察的异步验证器FormGroup angular 7

在Angular 7中，期望验证器返回Promise或可观察的异步验证器是用于实现表单验证的一种方式。它允许我们在表单中使用异步验证器来验证用户输入的数据。

在Angular中，表单验证是通过Validators模块来实现的。Validators模块提供了一些内置的验证器，如required、minLength、maxLength等。但是有时候我们需要进行异步验证，例如从服务器端获取数据进行验证，这时就需要使用异步验证器。

异步验证器可以是一个返回Promise或可观察对象的函数。当表单控件的值发生变化时，Angular会调用异步验证器函数，并等待它返回一个Promise或可观察对象。如果返回的是一个Promise，Angular会等待Promise的解析结果，如果返回的是一个可观察对象，Angular会订阅该可观察对象并等待其发出值。

下面是一个示例，演示如何在Angular 7中使用期望验证器返回Promise或可观察的异步验证器：

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myForm.get('myControl').pending">正在验证...</div>
      <div *ngIf="myForm.get('myControl').errors?.asyncValidator">异步验证失败</div>
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myControl: new FormControl('', null, this.asyncValidator)
    });
  }

  asyncValidator(control: FormControl): Promise<any> {
    return new Promise((resolve, reject) => {
      // 异步验证逻辑，例如从服务器端获取数据进行验证
      // 如果验证通过，调用resolve(null)，否则调用resolve({ asyncValidator: true })
    });
  }
}

在上面的示例中，我们创建了一个名为myForm的FormGroup，并在其中添加了一个名为myControl的FormControl。在FormControl的构造函数中，我们传入了一个异步验证器函数this.asyncValidator。

异步验证器函数asyncValidator接收一个FormControl作为参数，并返回一个Promise。在异步验证器函数中，我们可以执行异步操作，例如从服务器端获取数据进行验证。如果验证通过，我们调用resolve(null)，否则调用resolve({ asyncValidator: true })。

在模板中，我们使用myForm.get('myControl').pending来判断异步验证是否正在进行中。如果正在进行中，我们显示"正在验证..."的提示信息。如果验证失败，我们使用myForm.get('myControl').errors?.asyncValidator来判断，并显示"异步验证失败"的提示信息。

这是一个基本的示例，你可以根据实际需求进行修改和扩展。关于Angular表单验证和异步验证器的更多信息，你可以参考腾讯云的相关文档和教程：

• Angular 表单验证
• Angular 异步验证器

请注意，以上链接是腾讯云的相关文档和教程，仅供参考。