Angular 4 FormGroup值匹配数组项：自定义国家输入验证实现

没问题，这就教你怎么实现这个匹配国家列表的自定义验证器！

步骤1：处理国家列表的获取与存储 #

首先，你可以直接把接口返回的结果赋值给countryList（不用多余的map+push，除非你需要转换数据格式），同时要注意异步获取数据后需要触发表单重新验证——因为初始状态下列表是空的，获取到数据后得让验证器重新检查当前输入值：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { SharedService } from 'path-to-your-shared-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  form!: FormGroup;
  countryList: any[] = []; // 请根据实际接口返回的类型调整，比如Country[]

  constructor(
    private fb: FormBuilder,
    private sharedService: SharedService
  ) {}

  ngOnInit(): void {
    // 先获取国家列表
    this.sharedService.getCountry().subscribe(res => {
      this.countryList = res;
      // 列表更新后，触发表单控件的重新验证
      this.form.get('country')?.updateValueAndValidity();
    });

    // 创建表单，添加自定义验证器
    this.form = this.fb.group({
      country: new FormControl('', [
        Validators.required,
        this.countryValidator.bind(this) // 绑定组件实例的this，不然访问不到countryList
      ])
    });
  }
}

步骤2：编写自定义验证函数 #

接下来实现核心的验证逻辑，检查输入值是否存在于countryList中。注意要根据你实际的国家数据结构调整判断条件（比如是匹配国家名称name还是代码code）：

// 在组件类中添加这个方法
countryValidator(control: FormControl): { [key: string]: boolean } | null {
  // 空值交给required验证器处理，这里直接返回null
  if (!control.value) {
    return null;
  }

  // 假设你的国家对象有一个name字段，比如 { name: 'China', code: 'CN' }
  const isValidCountry = this.countryList.some(
    country => country.name.trim().toLowerCase() === control.value.trim().toLowerCase()
  );

  // 匹配成功返回null（无错误），失败返回自定义错误标识
  return isValidCountry ? null : { invalidCountry: true };
}

步骤3：模板中显示错误提示 #

最后在模板里可以根据自定义错误标识显示对应的提示：

<form [formGroup]="form">
  <label for="country">国家</label>
  <input type="text" id="country" formControlName="country">

  <!-- 显示必填错误 -->
  <div *ngIf="form.get('country')?.errors?.required && form.get('country')?.touched">
    国家为必填项
  </div>
  <!-- 显示自定义验证错误 -->
  <div *ngIf="form.get('country')?.errors?.invalidCountry && form.get('country')?.touched">
    请输入有效的国家名称
  </div>
</form>

关键注意点 #

• 绑定this：因为验证器函数默认的this不是组件实例，所以必须用bind(this)，或者把验证器写成箭头函数来保留上下文。
• 大小写不敏感匹配：我在代码里加了trim()和toLowerCase()，这样用户输入大小写不同的国家名也能匹配，你可以根据需求去掉。
• 异步数据更新：获取到国家列表后一定要调用updateValueAndValidity()，不然表单不会重新验证已输入的值。

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