在Angular中，可以使用自定义异步验证器来验证表单字段，并从API获取响应。以下是一个解决方法的示例代码：

首先，创建一个名为api.service.ts的服务来处理API请求和响应：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) { }

  checkUsernameAvailability(username: string) {
    return this.http.get(`/api/check-username?username=${username}`);
  }
}

然后，在组件中使用该服务来处理表单的异步验证：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { ApiService } from './api.service';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    

      
      
Username is already taken
    
  `,
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private apiService: ApiService) {
    this.myForm = this.fb.group({
      username: ['', Validators.required, this.validateUsernameAvailability()]
    });
  }

  validateUsernameAvailability(): AsyncValidatorFn {
    return (control: AbstractControl) => {
      return this.apiService.checkUsernameAvailability(control.value).pipe(
        map(res => {
          return res ? { usernameTaken: true } : null;
        })
      );
    };
  }
}

在上述代码中，ApiService是一个用于发送HTTP请求的服务。checkUsernameAvailability方法发送一个GET请求到/api/check-username，并返回一个Observable，该Observable会发出一个布尔值，指示用户名是否已被占用。

在AppComponent中，我们使用FormBuilder创建了一个名为myForm的响应式表单，并将自定义异步验证器validateUsernameAvailability应用于username字段。该验证器会调用ApiService中的checkUsernameAvailability方法来检查用户名的可用性，并根据API响应返回一个布尔值。

最后，我们在模板中使用myForm.get('username').hasError('usernameTaken')来检查表单字段是否具有自定义异步验证错误，并显示相应的错误消息。

请注意，上述代码只是一个示例，实际的API请求和验证逻辑可能会有所不同，具体取决于你的应用程序需求。