Question

在提交Angular表单时，各个表单控件中没有错误。表单状态仍为INVALID。使用以下错误对象。

errors : {
    __zone_symbol__state: true, 
    __zone_symbol__value: null
}

以下是包含自定义验证程序的表单组

this.form = fb.group({
        start_date: [new Date(), [ Validators.required ]],
        start_time: ['13:00'],
        end_date: [new Date(), [ Validators.required ]],
        end_time: ['16:00'],
    }, {
        validator: EndDateValidators.checkStartDate
    });

此EndDateValidators.checkDtartDate验证startDateTime在endDateTime之前。

正确验证并且获取此对象时出错。

errors : {
    __zone_symbol__state:true
    __zone_symbol__value: {
        minDate:true
    }
}

不确定为何在__zone_symbol__value

下发出错误

如果我删除自定义验证器，一切正常。但是我需要在组件内部提交时验证startDateTime-endDateTime。（我认为这有点脏。）

我认为问题可能出在Custom Validator代码上：

import {AbstractControl, ValidationErrors} from '@angular/forms';
import {reject} from 'q';
export class EndDateValidators {
    static checkStartDate(control: AbstractControl): Promise<ValidationErrors | null> {

        return new Promise(((resolve, reject) => {
            // Not showing exact calculation to make this code short.
            const diff = endDateTime - startDateTime;
            if (diff <= 0)
                resolve({minDate: true});

            resolve(null);

        }));
    }
}

Answer 1

问题是自定义验证器中使用的Promise，在我们为验证进行服务器调用时使用。

在这种情况下，我真的没有对服务器进行任何调用，因此使Custom Validator简单如下修复我的问题。

import {AbstractControl, ValidationErrors} from '@angular/forms';
export class EndDateValidators {
    static checkStartDate(control: AbstractControl): ValidationErrors | null {
        let ret: ValidationErrors = null;

        // Not showing exact calculation to make this code short.
        const diff = endDateTime - startDateTime;
        if (diff <= 0)
            ret = { minDate: true };

        return ret;

    }
}

这解决了这个问题。

但还不确定，如果我需要调用服务器进行验证，我会遇到同样的问题！？

Answer 2

你的验证器是如何使用的？

如果您使用异步验证器，则必须为第二个FormControl参数传递并清空数组，因此它应该是这样的：

myField: ["", [], [myAsyncValidator]],

如果将其更改为

myField: ["", myAsyncValidator]

你会得到 __ zone_symbol__state 错误

Answer 3

使用 asyncValidator 代替 validator ，如下所示：

this.form = fb.group({
        start_date: [new Date(), [ Validators.required ]],
        start_time: ['13:00'],
        end_date: [new Date(), [ Validators.required ]],
        end_time: ['16:00'],
    }, {
        asyncValidator: EndDateValidators.checkStartDate
    });

带有__zone_symbol__state的Angular 5表单组错误：true

3 个答案: