创建自定义验证器以针对多个表单字段进行验证答案

【问题标题】：Create a custom validator to validate against multiple form fields创建自定义验证器以针对多个表单字段进行验证
【发布时间】：2023-03-08 09:25:02
【问题描述】：

我有以下表单设置：

this.form = new FormGroup({
  ...
  year: new FormControl("", validateDateMethod(year, month, day)),
  month: new FormControl("", validateDateMethod(year, month, day)),
  day: new FormControl("", validateDateMethod(year, month, day))
});

我想创建一个自定义验证器来根据 3 个字段验证日期。

是否可以基于多个表单值创建验证器？

普通海关验证器只接受当前控件和任何参数值。

谢谢

【问题讨论】：

请查看此链接中的代码：stackoverflow.com/a/44449802/3875919
我已经尝试过类似的方法，但我收到一个错误：Argument of type is not assignable to parameter of type 'ValidatorFn |验证器Fn[] |抽象控制选项'。对象字面量只能指定已知属性，而 'validator' 不存在于类型 'ValidatorFn |验证器Fn[] | AbstractControlOptions
我需要使用表单生成器来清除错误
您可以通过在FormControl 的errors 对象中设置自定义属性，然后使用*ngIf 指令在DOM 中显示错误消息来实现。

标签： angular angular-reactive-forms angular-validation angular-validator

【解决方案1】：

您可以将所有三个日期分组到一个表单组中并向其中添加验证器。然后您可以验证所有三个字段。

 this.form = new FormGroup({
      ...
      dateGroup:this.formBuilder.group({
      year: new FormControl(""),
      month: new FormControl(""),
      day: new FormControl("")
    },{validator:validateDates}) 
  });

    validateDates(c:AbstractControl){
    const year = c.get('year');
    const month = c.get('month');
    const day = c.get('day');
    ....
    }

【讨论】：

您需要将整个 formGroup 作为参数传递以访问所有控件：validateDates(c:FormGroup)
不会产生问题，因为 FormGroup 扩展了 AbstractControl
完美。谢谢。