angular2中的表单异步验证

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="username">
      <div *ngIf="myForm.get('username').pending">正在验证...</div>
    </form>
  `
})
export class FormComponent implements OnInit {
  myForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.myForm = new FormGroup({
      username: new FormControl('', Validators.required, this.asyncUsernameValidator)
    });
  }

  asyncUsernameValidator(control: FormControl): Promise<any> | Observable<any> {
    return new Promise((resolve, reject) => {
      // 发送异步请求进行验证
      // 假设请求返回的数据为{ valid: true }表示验证通过，{ valid: false }表示验证失败
      setTimeout(() => {
        if (control.value === 'admin') {
          resolve({ valid: true });
        } else {
          resolve({ valid: false });
        }
      }, 2000);
    });
  }
}

<form [formGroup]="myForm">
  <input type="text" formControlName="username">
  <div *ngIf="myForm.get('username').pending">正在验证...</div>
</form>