CODEWITHSUNDEEP
angulartypescript
ilovejavaAJ
ilovejavaAJ

Reputation: 1841

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

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

Upvotes: 9

Views: 16773

Answers (3)

Eli Davis
Eli Davis

Reputation: 679

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

}

Upvotes: 0

dragonfly02
dragonfly02

Reputation: 3679

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

        };
      )
  }

Upvotes: 11

Ján Halaša
Ján Halaša

Reputation: 8431

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

Upvotes: 12

Related Questions