Angular 5中如何实现基于HTTP请求的FormGroup自定义验证器？

我太懂你在Angular 5里折腾FormBuilder自定义验证器的痛苦了，尤其是要结合HTTP请求来做ID唯一性验证的场景。别慌，下面给你一步步拆解实现方案，附上完整的代码示例，应该能帮你顺利解决问题：

首先把查询ID的HTTP请求封装到服务里，这样验证器可以复用，也符合Angular的代码规范：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class RecordService {
  constructor(private http: HttpClient) {}

  // 根据输入的ID查询匹配记录，返回是否存在的布尔值
  checkIdExists(id: string): Observable<boolean> {
    // 替换成你的实际API地址，比如后端提供的按ID查询接口
    return this.http.get<Record[]>(`/api/records?id=${id}`)
      .map(records => records.length > 0); // 数组长度>0说明ID已存在
  }
}

// 和后端返回的Record结构匹配的接口
interface Record {
  id: string;
  // 其他业务字段...
}

因为涉及HTTP异步请求，必须用异步验证器（AsyncValidator），同步验证器没法处理异步操作。我们把验证器写成工厂函数，方便注入服务：

import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { RecordService } from './record.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

export function uniqueIdValidator(recordService: RecordService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    const inputId = control.value;
    
    // 输入为空时直接返回null，配合必填验证器处理空值场景
    if (!inputId) {
      return Observable.of(null);
    }

    return recordService.checkIdExists(inputId)
      .map(isExists => {
        // ID存在就返回错误标记，否则返回null表示验证通过
        return isExists ? { uniqueId: true } : null;
      })
      .catch(() => {
        // 请求出错时可以返回null（忽略错误），或者自定义错误标记比如{ serverError: true }
        return Observable.of(null);
      });
  };
}

在你的表单组件里，注入RecordService和FormBuilder，然后把异步验证器绑定到ID控件上：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RecordService } from './record.service';
import { uniqueIdValidator } from './unique-id.validator';

@Component({
  selector: 'app-record-form',
  templateUrl: './record-form.component.html'
})
export class RecordFormComponent implements OnInit {
  recordForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private recordService: RecordService
  ) {}

  ngOnInit() {
    this.recordForm = this.fb.group({
      id: [
        '',
        [Validators.required], // 同步验证器：必填
        [uniqueIdValidator(this.recordService)] // 异步验证器：ID唯一性
      ],
      // 其他表单控件...
    });
  }

  // 方便模板快速获取ID控件的状态
  get idControl() {
    return this.recordForm.get('id');
  }
}

最后在HTML模板里，根据验证状态展示对应的错误信息，还可以加上验证中的加载提示：

<form [formGroup]="recordForm">
  <div class="form-group">
    <label for="recordId">记录ID:</label>
    <input type="text" id="recordId" formControlName="id" class="form-control">
    
    <!-- 必填错误提示 -->
    <div *ngIf="idControl.invalid && idControl.errors?.required" class="text-danger">
      ID不能为空
    </div>
    
    <!-- 唯一性错误提示 -->
    <div *ngIf="idControl.invalid && idControl.errors?.uniqueId" class="text-danger">
      该ID已存在，请输入其他ID
    </div>
    
    <!-- 验证中状态提示（可选） -->
    <div *ngIf="idControl.pending" class="text-info">
      正在验证ID是否可用...
    </div>
  </div>

  <button type="submit" [disabled]="recordForm.invalid" class="btn btn-primary">提交</button>
</form>

如果不想用户每输入一个字符就发请求，可以给验证器加上防抖逻辑（RxJS 5写法，适配Angular 5）：

// 修改验证器，添加300ms防抖
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/switchMap';

export function uniqueIdValidator(recordService: RecordService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return control.valueChanges
      .debounceTime(300) // 等待300ms用户停止输入再发请求
      .switchMap(inputId => {
        if (!inputId) {
          return Observable.of(null);
        }
        return recordService.checkIdExists(inputId)
          .map(isExists => isExists ? { uniqueId: true } : null)
          .catch(() => Observable.of(null));
      })
      .first(); // 只取最新的一次验证结果
  };
}

内容的提问来源于stack exchange，提问作者Richard