Angular 反应式自定义验证器不工作

Question

我写了一个简单的验证器来比较表单组上的两个日期表单控件。

简单检查：maturityDate 必须大于 valueDate，否则会使表单组无效。

下面是表单组的定义：

this.datesForm = this._fb.group(
  {
    tradeDate: [new Date(), Validators.required],
    valueDate: [new Date(), Validators.required],
    maturityDate: [new Date(), [Validators.required]],
    dayCount: [{value: 0, disabled: true}, Validators.required]
  },
  {
    validator: validateMaturityDate
  }
);

这是我的 validator.ts

import { AbstractControl } from '@angular/forms';

export function validateMaturityDate(datesForm: AbstractControl) {
    const valueDate: Date = datesForm.get('valueDate').value;
    const maturityDate: Date = datesForm.get('maturityDate').value;

    if (maturityDate <= valueDate) {
        datesForm.setErrors({ 'validMaturity': true });
    } else {
        datesForm.setErrors({ 'validMaturity': false });
    }
    return;
}

如果我 select 来自日期选择器的到期日早于起息日，我的预期是表单组无效。但事实并非如此，它在这两种情况下都有效。我做错了什么吗？

https://i.stack.imgur.com/KzRJg.png https://i.stack.imgur.com/KEM1v.png

Answer 1

将 validateMaturityDate 函数更新为 return 与错误或空相关的对象

export function validateMaturityDate(datesForm: AbstractControl)  {
    const valueDate: Date = datesForm.get('valueDate').value;
    const maturityDate: Date = datesForm.get('maturityDate').value;

    if (maturityDate <= valueDate) {
        return { 'validMaturity': true }; 
    } else {
        return null;
    }
}

ValidatorFn interface

Answer 2

malbarmawi 的回答很正确。这个问题与我无法让 formGroup 验证程序执行和旋转我的轮子几个小时的情况完全相同。

但是在我的例子中，我在 FormGroup 中将验证器列在名为 validators 而不是 validator 的键下。

这是正确的： { 验证器: validateMaturityDate } 这不执行： { 验证器: validateMaturityDate }

此处的 angular.io 文档将验证器显示为复数形式。所以要么我遗漏了一些东西，要么文档可能需要调整。

https://v6.angular.io/guide/form-validation#cross-field-validation

Angular 反应式自定义验证器不工作

Angular reactive custom validator not working

angular

reactive

customvalidator