Apply Angular 6 Compose Validator Conditionally

Question

In my application I want to apply compose validator conditionally and respective validators. I did with custom validator but doesn't get success.

this.myForm = this.builder.group({
   country:['',Validators.required],
   age:['',Validators.required],
   dependentName:['',Validators.compose([Validators.maxLength(20), Validators.required])]
})

If country is 'America' and age is less than 18 then dependentName is required and max length should be 20.
If the country is other than 'America' then dependentName field is not required but maxlength should be 20.

Please help.

You could add those validators dynamically, based on input value of the country stackoverflow.com/questions/43603605/… — Amit Chigadani
– Amit Chigadani, Commented Oct 22, 2018 at 5:14
Can you provide that custom validator that you try to create? — Buczkowski
– Buczkowski, Commented Oct 22, 2018 at 5:25

T. Shashwat · Accepted Answer · 2018-10-22 05:23:25Z

0

define your custome validator service and use it in formBuilder as given below

dependentName: ['',  [Validators.required, customValidationService.checkLimit(1,maxValue)]], /// provide your limit in place of minvalue and maxValue , like checkLimit(1,99)

in your **customValidationService **

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class customValidationService {
   static checkLimit(min: number, max: number): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
            return { 'range': true };
        }
        return null;
    };
  }
}

Or

dependentName: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]

answered Oct 22, 2018 at 5:23

T. Shashwat

1,16510 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Apply Angular 6 Compose Validator Conditionally

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related