Angular 反应式表单自定义控件异步验证

# 使用Angular反应式表单实现自定义控件异步验证

typescript
// async-input.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MyAsyncValidator } from './my-async-validator.service';
@Component({
  selector: 'app-async-input',
  template: `
    
    
      {{ customControl.getError('asyncError') }}
    
  `,
})
export class AsyncInputComponent implements OnInit {
  customControl: FormControl;
  constructor(private asyncValidator: MyAsyncValidator) {}
  ngOnInit() {
    this.customControl = new FormControl('', {
      validators: Validators.required,
      asyncValidators: this.asyncValidator.validate.bind(this.asyncValidator),
      updateOn: 'blur',
    });
  }
}

typescript
// my-async-validator.service.ts
import { Injectable } from '@angular/core';
import { AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root',
})
export class MyAsyncValidator {
  validate(): AsyncValidatorFn {
    return (control: AbstractControl): Observable => {
      // 模拟异步验证，这里可以替换成实际的后台验证逻辑
      return this.fakeAsyncValidation(control.value).pipe(
        map((result: boolean) => (result ? null : { asyncError: '验证失败' })),
        catchError(() => of(null))
      );
    };
  }
  private fakeAsyncValidation(value: string): Observable {
    // 模拟异步验证
    return of(value === 'valid').pipe(
      // 延时1秒模拟后台请求
      delay(1000)
    );
  }
}

typescript
// parent.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
      
    
  `,
})
export class ParentComponent {}