Angular 响应式(Reactive)自定义验证器不起作用

Question

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

简单检查:到期日期 必须 > 大于 值(value)日期 , 如果没有使表单组无效。

下面是表单组的定义:

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;
}

如果我从日期选择器中选择一个在起息日之前的到期日，我的期望是表单组无效。但事实并非如此，它在两种情况下都有效。难道我做错了什么？

/image/KzRJg.png
/image/KEM1v.png

Answer 1

更新 validateMaturityDate函数返回与错误或空值相关的对象

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