Angular 5 form group errors with __zone_symbol__state: true

Issue

On submitting Angular form, there is no error in the individual form controls. Still the form state is INVALID. with the following error object.

errors : {
    __zone_symbol__state: true, 
    __zone_symbol__value: null
}

Here is the form group with custom 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'],
    }, {
        validator: EndDateValidators.checkStartDate
    });

This EndDateValidators.checkDtartDate is validating the startDateTime is before endDateTime.

It is validating correctly and one error getting this object.

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

Not sure why it is giving an error under __zone_symbol__value

If I remove the custom validator everything works fine. But then I need to validate startDateTime-endDateTime on submit inside component.(I think that is little dirty.)

I think may be the problem is with Custom Validator code:

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

        }));
    }
}

Solution

The problem was the Promise used in the custom validator, that is used when we make a server call for the validation.

In this case, I am really not making any calls to the server so making Custom Validator simple like below fixed my problem.

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;

    }
}

This solves the problem.

But not sure yet, if I need to make server call for the validation, I would get the same problem!?

Answered By – Lahar Shah

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.