Angular 5 form group errors with __zone_symbol__state: true

Question

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

        }));
    }
}

Answer 1

How's your validator being used?

If youre using an async validator, you must pass an empty array for the second FormControl parameters so it should be something like this:

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

If you change this to

myField: ["", myAsyncValidator]

You'll get the __zone_symbol__state error