在Angular中，可以使用自定义验证器来对表单字段进行验证。当使用自定义验证器时，有时会遇到在进行HTTP调用时返回null的问题。以下是解决这个问题的代码示例：

1. 创建一个自定义验证器：

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

export class CustomValidator {
  constructor(private http: HttpClient) {}

  static async validateAsync(control: AbstractControl): Promise {
    const value = control.value;

    // 发起HTTP调用
    const result = await this.http.get('http://example.com/api/validate/' + value).toPromise();

    // 根据返回结果进行验证
    if (result.valid) {
      return null; // 返回null表示验证通过
    } else {
      return { invalid: true }; // 返回一个错误对象表示验证失败
    }
  }
}

2. 在组件中使用自定义验证器：

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { CustomValidator } from './custom-validator';

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

      
      
Invalid value
    
  `,
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor(private http: HttpClient) {
    this.myForm = new FormGroup({
      myField: new FormControl('', Validators.required, CustomValidator.validateAsync.bind(CustomValidator, this.http))
    });
  }
}

在上述代码中，我们创建了一个CustomValidator类，其中的validateAsync方法是一个异步方法，它通过HTTP调用进行验证。在组件中，我们使用FormControl的构造函数的第三个参数来指定自定义验证器，同时使用CustomValidator.validateAsync.bind()绑定了CustomValidator类和HttpClient实例。

通过这种方式，我们可以在进行HTTP调用时自定义验证器会返回一个Promise，以便异步等待验证结果，并将结果应用到表单字段的验证状态中。