Conditionally implement validation in form fields of an Angular 2 reactive form

Question

Can I conditionally implement validation in Angular 2 reactive form. I have this reactive form with 3 formControl fields one is a selection and the other two are input text for first name and last name. I want to conditionally implements validation for firstname and lastname based on the selection of the first field which is 'validateBy'. If the user selects 'byFirstName' only firstName should be validated. If the user selects 'byLastName' only lastName should be validated. If the user selects 'byBoth' both firstName and lastName should be validated. I created a plunker for this. Only validation byBoth works.

ngOnInit() {
this.myForm = this._fb.group({
  validateBy: ['byFirstName'],
  firstName:  ['', isFirstNameValid(() => (this.validateBy === 'byFirstName' || this.validateBy === 'byBoth'),
                     Validators.required)],
  lastName: ['', isLastNameValid(() => (this.validateBy === 'byLastName' || this.validateBy === 'byBoth'),
                     Validators.required)],
});

https://plnkr.co/edit/X0zOGf?p=preview

you can if you write a custom directive validation

Nimatullah Razmjo
– Nimatullah Razmjo

2017-04-19 09:36:12 +00:00
Commented Apr 19, 2017 at 9:36 — Nimatullah Razmjo
– Nimatullah Razmjo, Commented Apr 19, 2017 at 9:36

Ján Halaša · Accepted Answer · 2017-04-19 09:41:00Z

12

The problem is that your code evaluates the expression just once - when the FormGroup is created. You need to make it dynamic by creating your custom validator that will evaluate the expression every time it gets called:

this.personForm= this.fb.group({
  firstName: ['', Validators.required];
  lastName:  [
    '', 
    conditionalValidator(
      (() => this.isValidationForLastName === true),
      Validators.required
    )
  ]
});

function conditionalValidator(condition: (() => boolean), validator: ValidatorFn): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    if (! condition()) {
      return null;
    }
    return validator(control);
  }
}

answered Apr 19, 2017 at 9:41

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

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

8 Comments

ilovejavaAJ Over a year ago

Halasa I tried your code. now it doesn't validate :(

Ján Halaša Over a year ago

Have you tried to debug it? Is the validator called? Do you have some error messages in the browser console?

ilovejavaAJ Over a year ago

just few changes what if my condition will be based on string not boolean. I updated my question.

Ján Halaša Over a year ago

With a string variable, you change just the condition function: (() => this.isValidationForLastName === 'validateIt'). If you implemented it and it doesn't work, please add your code to the question or create a plunker (or similar) example.

ilovejavaAJ Over a year ago

Halasa I updated my question and I already created a plunker similar to my problem. Can you check my plunker.

|

dragonfly02 · Accepted Answer · 2017-09-16 13:20:11Z

Another way of doing it would be something like this. Seems to work on plunker

  ngOnInit() {
    this.myForm = this._fb.group({
      validateBy: ['byFirstName'],
      firstName:  [''],
      lastName: [''],
    });

    this.myForm.get('validateBy').valueChanges.subscribe(
        (validateBy : string) => {
          if (validateBy === 'byFirstName' || validateBy === 'byBoth') {
            this.myForm.get('firstName').setValidators([Validators.required]);
            this.myForm.get('firstName').updateValueAndValidity();
          }
          if (validateBy === 'byLastName' || validateBy == 'byBoth') {
            this.myForm.get('lastName').setValidators([Validators.required]);
            this.myForm.get('lastName').updateValueAndValidity();
          }

        };
      )
  }

Eli Davis · Accepted Answer · 2019-05-24 13:06:30Z

I made a library just for this.

Your solution might look something like:

constructor(private cv: ConditionallyValidateService, private fb: FormBuilder) {}

ngOnInit() {
    this.myForm = this._fb.group({
        validateBy: ['byFirstName'],
        firstName:  [''],
        lastName: [''],
     });

    cv.validate(this.myForm, 'firstName')
        .using(Validators.required)
        .when('validateBy')
        .is('byFirstName')

    cv.validate(this.myForm, 'lastName')
        .using(Validators.required)
        .when('validateBy')
        .is('byLastName')

    cv.validate(this.myForm, 'firstName', 'lastName')
        .using(Validators.required)
        .when('validateBy')
        .is('byBoth')

}

Collectives™ on Stack Overflow

Conditionally implement validation in form fields of an Angular 2 reactive form

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related