Split Custom Validator into multiple Functions Angular 2

Question

    export class FormFieldErrorExample {
      email = new FormControl('', [Validators.required, Validators.email, this.lengthValidator]);

      getErrorMessage() {
        return this.email.hasError('required') ? 'You must enter a value' :
            this.email.hasError('email') ? 'Not a valid email' :
                'minimum length should be greater than 10';
      }
      lengthValidator(control : AbstractControl){

        if(control.value.length <10)    
        return {lengthError : true};
        else return this.anotherValidator(control);
      }
anotherValidator(control: AbstractControl){

 return {lengthError : true};
}

I have tried to split the validator into another function but getting an error like 'Cannot read property 'anotherValidator' of undefined'. How can i split the validator into multiple functions and pass the control properly

https://stackblitz.com/edit/angular-psfasq-5yxaln

Amit Chigadani · Accepted Answer · 2018-09-07 10:20:52Z

1

You should pass the context of this to your customvalidator lengthValidator using bind()

email = new FormControl('', [Validators.required, Validators.email, this.lengthValidator.bind(this)])

answered Sep 7, 2018 at 10:20

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mithun S Over a year ago

Thanks you saved my day!! .bind(this) works perfectly.

Collectives™ on Stack Overflow

Split Custom Validator into multiple Functions Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related