angularvalidationtypescriptasynchronouspromise

set error " errors : {__zone_symbol__state: null, __zone_symbol__value: Array(0)}" by Angular 4 validator


Mobile mobileNumberValidator returns fine but the other two validators returns a null promise on errors. Cant identify the mistake i have done here. Please help. Those two validators sets errors in formbuilder object as follows

errors : {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

In form builder group

 this.empInfoForm = this.fb.group({
      'Mobile': [null, [Validators.required], [this.mobileNumberValidator.bind(this)]],
      'Private': [null,  [this.privateNumberValidator.bind(this)]],
      'Work': [null, [this.workNumberValidator.bind(this)]],  
    });

Validator Methods

  mobileNumberValidator(control: AbstractControl) {

        return new Promise(resolve => {
          setTimeout(() => {
            if (!this.isMobileNumberValid) {
              resolve({
                'phoneNumber': true

              })
            console.log(this.empInfoForm)
            } else {
              resolve(null);
            }
          }, 10);
        })
      }
        workNumberValidator(control: AbstractControl) {

        return new Promise(resolve => {
          setTimeout(() => {
            if (!this.isWorkNumberValid) {
              resolve({
                'phoneNumber': true

              })
               console.log(this.empInfoForm)
            } else {
              resolve(null);
            }
          }, 10);
        })
      }
        privateNumberValidator(control: AbstractControl) {

        return new Promise(resolve => {
          setTimeout(() => {
            if (!this.isPrivateNumberValid) {
              resolve({
                'phoneNumber': true

              })

                  console.log(this.empInfoForm)
            } else {
              resolve(null);
            }
          }, 10);
        })
      }

Solution

  • I found the mistake I have done here. Custom validator binding should be the third parameter here.

    this.empInfoForm = this.fb.group({
          'Mobile': [null, [Validators.required], [this.mobileNumberValidator.bind(this)]],
          'Private': [null,null,[this.privateNumberValidator.bind(this)]],
          'Work': [null,null,[this.workNumberValidator.bind(this)]],  
        });