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

这是我的验证器。

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

如果我从起息日中选择起息日，该起息日为起息日，则我期望表单组无效。但这不是事实，它在两种情况下均保持有效。我在做错什么吗？

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

Answer 1

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

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中的一个验证器而不是验证器项下列出了验证器。

这是正确的： { validator ：validateMaturityDate} 这不会执行： { validators ：validateMaturityDate}

这里的angular.io文档将验证器显示为复数形式。因此，我丢失了一些内容或文档可能需要进行调整。

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

角反应式自定义验证器不起作用

2 个答案: