如果条件为真，则仅角度调用异步验证器

import { AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, debounceTime, switchMap } from 'rxjs/operators';

// 自定义异步验证器函数
export function uniqueUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    if (!control.value) {
      return of(null); // 如果控件值为空，则不执行验证
    }
    return userService.checkUsername(control.value).pipe(
      map(exists => (exists ? { uniqueUsername: true } : null)),
      catchError(() => of(null))
    );
  };
}

// 在组件中使用
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {}

  ngOnInit(): void {
    this.registerForm = this.fb.group({
      username: ['', Validators.required, uniqueUsernameValidator(this.userService)],
      // 其他字段...
    });
  }

  onSubmit(): void {
    // 提交表单逻辑...
  }
}