如何为动态构建的Angular Form Control设置动态验证

实现思路 #

将配置对象中可选的validation属性，转换为Angular表单支持的验证器函数，在创建FormControl时传入即可。若配置对象无validation属性，则不添加任何验证规则。

步骤1：编写验证器转换工具函数 #

先实现一个函数，把自定义的验证规则对象映射成Angular官方的ValidatorFn数组：

import { Validators, ValidatorFn } from '@angular/forms';

// 转换自定义验证规则为Angular兼容的验证器
getValidators(validation?: any): ValidatorFn[] {
  const validators: ValidatorFn[] = [];
  if (!validation) return validators;

  // 处理必填验证
  if (validation.required) {
    validators.push(Validators.required);
  }
  // 处理最小长度验证
  if (validation.minLength) {
    validators.push(Validators.minLength(validation.minLength));
  }
  // 处理最大长度验证
  if (validation.maxLength) {
    validators.push(Validators.maxLength(validation.maxLength));
  }
  // 处理正则匹配验证
  if (validation.pattern) {
    validators.push(Validators.pattern(validation.pattern));
  }
  // 可根据需求扩展其他验证规则
  return validators;
}

步骤2：修改动态表单创建逻辑 #

在ngOnInit中先提取验证规则，再创建带验证的FormControl：

import { FormGroup, FormControl } from '@angular/forms';

ngOnInit(): void {
  const inputDataObj = {} as any;
  // 获取当前配置对应的验证器数组
  const controlValidators = this.getValidators(this.InputObj.validation);

  for (const prop of Object.keys(this.InputObj)) {
    if (prop !== 'validation') {
      // 创建FormControl时传入初始值和验证器
      inputDataObj[prop] = new FormControl(this.InputObj[prop], controlValidators);
      this.inputProps.push(prop);
    }
  }
  this.form = new FormGroup(inputDataObj);
}

说明 #

• 若配置对象（如示例中的textBox）不含validation属性，getValidators会返回空数组，对应的FormControl将无任何验证规则，满足可选需求。
• 后续需新增验证规则时，只需在getValidators函数中补充对应的映射逻辑即可。

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