Angular 反应式自定义验证器不起作用答案

【问题标题】：Angular reactive custom validator not workingAngular 反应式自定义验证器不起作用
【发布时间】：2018-09-19 10:41:46
【问题描述】：

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

简单检查：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
  }
);

这是我的验证器.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;
}

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

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

【问题讨论】：

标签： angular reactive customvalidator

【解决方案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

【讨论】：

对我来说可悲的是这不起作用，我不知道为什么。我什至尝试使用 setErrors 和返回验证对象进行设置 - 仍然没有结果。
@IvanYurchenko 嗨，我很乐意帮助您创建自己的问题并分享您的代码，也许您的实现不同或您有其他错误
嘿，我发现我的代码出了什么问题，看来你的回答是有效的，非常感谢！
嗨，谢谢。就我而言，我忘记在表达式“form.get dates ('valueDate').value”中添加“.value”

【解决方案2】：

malbarmawi 的答案是正确的。这个问题与我无法让 formGroup 验证器执行并旋转数小时的情况完全相同。

但是在我的例子中，我在 FormGroup 中的一个名为验证器而不是验证器的键下列出了验证器。

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

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

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

【讨论】：