Angular 5 个表单组错误 __zone_symbol__state: true

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。（我认为这有点脏。）

我认为问题可能出在自定义验证程序代码上：

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，当我们调用服务器进行验证时会使用它。

在这种情况下，我真的没有对服务器进行任何调用，因此像下面这样简化自定义验证器解决了我的问题。

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

Angular 5 个表单组错误 __zone_symbol__state: true

Angular 5 form group errors with __zone_symbol__state: true

validation

angular-validation

angular

angular-forms

angular5