Change validators dynamically according to conditions

Question

Change validators dynamically according to conditions

Scenario:

At the start, there is a single text box named Name1, a date picker called DOB1, and a check box labeled Compare. Both Name1 and DOB1 are mandatory. When the checkbox is clicked, two new form controls are dynamically included, named Name2 and DOB2, and at least one of either Name1 or DOB2 becomes required.

Hence, a valid form must have any of the following combinations:

Name1 DOB1 Name2 or //If Name2 is valid then need to remove required validator from DOB2
Name1 DOB1 DOB2 or //If DOB2 is valid then need to remove required validator from Name2
Name1 DOB1 Name2 DOB2

In all these cases, when the form is valid, the submit button should be enabled.

Issue:

I attempted to use setValidators but still cannot determine what I am missing. Upon clicking the checkbox, the form is only considered valid if all four controls are valid, whereas I require just three of them to be valid.

Code:

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <ion-card class="person1">
    <ion-card-content>
      <ion-list lines="full" class="ion-no-margin ion-no-padding">
        <ion-item>
          <ion-label position="stacked">Name / Number <ion-text color="danger">*</ion-text>
          </ion-label>
          <ion-input type="text" formControlName="NameNumber"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Date of birth<ion-text color="danger">*</ion-text>
          </ion-label>
          <ion-datetime required placeholder="Select Date" formControlName="DateOfBirth"></ion-datetime>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
  <ion-card class="person2" *ngIf="isComparisonChecked">
    <ion-card-content>
      <ion-list lines="full" class="ion-no-margin ion-no-padding">
        <ion-item>
          <ion-label position="stacked">Name / Number <ion-text color="danger">*</ion-text>
          </ion-label>
          <ion-input type="text" formControlName="NameNumber2"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Date of birth<ion-text color="danger">*</ion-text>
          </ion-label>
          <ion-datetime required placeholder="Select Date" formControlName="DateOfBirth2"></ion-datetime>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
  <ion-item class="compare-section" lines="none">
    <ion-label>Compare</ion-label>
    <ion-checkbox color="danger" formControlName="IsCompare"></ion-checkbox>
  </ion-item>
  <div class="ion-padding">
    <ion-button color="danger" *ngIf="LicensedStatus" [disabled]="!this.profileForm.valid" expand="block"
      type="submit" class="ion-no-margin">Submit</ion-button>
  </div>
</form>

Ts:

profileForm = new FormGroup({
NameNumber: new FormControl('', [Validators.required, Validators.pattern('^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$')]),
DateOfBirth: new FormControl('', Validators.required),
IsCompare: new FormControl(false)
});
...
this.profileForm.get('IsCompare').valueChanges.subscribe(checked => {
if (checked) {
    this.profileForm.addControl('NameNumber2', new FormControl('', [Validators.required, Validators.pattern('^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$')]));
    this.profileForm.addControl('DateOfBirth2', new FormControl('', Validators.required));

    this.profileForm.get('NameNumber2').valueChanges.subscribe(() => {
      if (this.profileForm.get('NameNumber2').valid) {
        this.profileForm.get('DateOfBirth2').clearValidators();
      }
      else {
        this.profileForm.get('DateOfBirth2').setValidators([Validators.required]);
      }
    this.profileForm.get('DateOfBirth2').updateValueAndValidity();
    });

    this.profileForm.get('DateOfBirth2').valueChanges.subscribe(() => {
      if (this.profileForm.get('DateOfBirth2').valid) {
        this.profileForm.get('NameNumber2').clearValidators();
      }
      else {
        this.profileForm.get('NameNumber2').setValidators([Validators.required, Validators.pattern('^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$')]);
      }
    this.profileForm.get('NameNumber2').updateValueAndValidity();
    });
  }
  else {
    this.profileForm.removeControl('NameNumber2');
    this.profileForm.removeControl('DateOfBirth2');
  }
});

What could be the missing piece here?

Update #1:

I made amendments in the above code. If I utilize updateValueAndValidity, an error message is encountered in the console.

https://i.stack.imgur.com/y3NGj.png

angular typescript validation ionic4 angular-forms

Answer 1

Answer №1

Below is the code snippet you can utilize:

this.profileForm.get('DateOfBirth2').setValidators([Validators.required]);
this.profileForm.get('DateOfBirth2').updateValueAndValidity();

Answer 2

Below is the code snippet you can utilize:

this.profileForm.get('DateOfBirth2').setValidators([Validators.required]);
this.profileForm.get('DateOfBirth2').updateValueAndValidity();

Answer 3

Answer №2

It seems like the issue stems from the fact that when updateValueAndValidity() is called, it triggers another valueChanges event, leading to an infinite loop within your subscriptions.

this.profileForm.get('NameNumber2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('DateOfBirth2').updateValueAndValidity(); // Triggers 'DateOfBirth2' valueChanges 
});

this.profileForm.get('DateOfBirth2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('NameNumber2').updateValueAndValidity(); // Triggers 'NameNumber2' valueChanges 
});

One way to tackle this problem is by using distinctUntilChanged, as mentioned in previous solutions.

Alternatively, you can utilize a feature of updateValueAndValidity() that allows you to configure its behavior. By passing {emitEvent: false} to updateValueAndValidity(), you can prevent the emission of the valueChanges event and break the loop.

this.profileForm.get('NameNumber2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('DateOfBirth2').updateValueAndValidity({emitEvent: false}); // Does NOT trigger valueChanges for 'DateOfBirth2'
});

this.profileForm.get('DateOfBirth2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('NameNumber2').updateValueAndValidity({emitEvent: false}); // Does NOT trigger valueChanges for 'NameNumber2'
});

Answer 4

It seems like the issue stems from the fact that when updateValueAndValidity() is called, it triggers another valueChanges event, leading to an infinite loop within your subscriptions.

this.profileForm.get('NameNumber2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('DateOfBirth2').updateValueAndValidity(); // Triggers 'DateOfBirth2' valueChanges 
});

this.profileForm.get('DateOfBirth2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('NameNumber2').updateValueAndValidity(); // Triggers 'NameNumber2' valueChanges 
});

One way to tackle this problem is by using distinctUntilChanged, as mentioned in previous solutions.

Alternatively, you can utilize a feature of updateValueAndValidity() that allows you to configure its behavior. By passing {emitEvent: false} to updateValueAndValidity(), you can prevent the emission of the valueChanges event and break the loop.

this.profileForm.get('NameNumber2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('DateOfBirth2').updateValueAndValidity({emitEvent: false}); // Does NOT trigger valueChanges for 'DateOfBirth2'
});

this.profileForm.get('DateOfBirth2').valueChanges.subscribe(() => {
  // code omitted
  this.profileForm.get('NameNumber2').updateValueAndValidity({emitEvent: false}); // Does NOT trigger valueChanges for 'NameNumber2'
});

Answer 5

Answer №3

Implementing the distinctUntilChanged method from rxjs/operators effectively resolves the issue of encountering the Maximum call stack size exceeded error.

Modify the line as shown below:

this.profileForm.get('NameNumber2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {

The updated code snippet will look like this:

import { distinctUntilChanged } from 'rxjs/operators';

this.profileForm.get('NameNumber2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
     if (this.profileForm.get('NameNumber2').valid) {
        this.profileForm.get('DateOfBirth2').clearValidators();
     }
     else {
       this.profileForm.get('DateOfBirth2').setValidators([Validators.required]);
     }
     this.profileForm.get('DateOfBirth2').updateValueAndValidity();
  });

this.profileForm.get('DateOfBirth2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
     if (this.profileForm.get('DateOfBirth2').valid) {
        this.profileForm.get('NameNumber2').clearValidators();
     }
     else {
        this.profileForm.get('NameNumber2').setValidators([Validators.required, Validators.pattern('^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$')]);
     }
     this.profileForm.get('NameNumber2').updateValueAndValidity();
});

After making the above changes and running the modified code, I verified that the form is valid and the submit button remains enabled for all mentioned scenarios.

Answer 6

Implementing the distinctUntilChanged method from rxjs/operators effectively resolves the issue of encountering the Maximum call stack size exceeded error.

Modify the line as shown below:

this.profileForm.get('NameNumber2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {

The updated code snippet will look like this:

import { distinctUntilChanged } from 'rxjs/operators';

this.profileForm.get('NameNumber2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
     if (this.profileForm.get('NameNumber2').valid) {
        this.profileForm.get('DateOfBirth2').clearValidators();
     }
     else {
       this.profileForm.get('DateOfBirth2').setValidators([Validators.required]);
     }
     this.profileForm.get('DateOfBirth2').updateValueAndValidity();
  });

this.profileForm.get('DateOfBirth2').valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
     if (this.profileForm.get('DateOfBirth2').valid) {
        this.profileForm.get('NameNumber2').clearValidators();
     }
     else {
        this.profileForm.get('NameNumber2').setValidators([Validators.required, Validators.pattern('^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$')]);
     }
     this.profileForm.get('NameNumber2').updateValueAndValidity();
});

After making the above changes and running the modified code, I verified that the form is valid and the submit button remains enabled for all mentioned scenarios.

Answer 7

Answer №4

Consider implementing a customValidator that can handle multiple errors and check for errors across the entire form. This way, you can easily track which fields have errors by using an auxiliary function.

  form=new FormGroup({
    name1:new FormControl(),
    date1:new FormControl(),
    compare:new FormControl(),
    name2:new FormControl(),
    date2:new FormControl(),
  }, this.customValidator())

  hasError(error:string)
  {
    return this.form.errors ? this.form.errors.error.find(x=>x==error) : null
  }

  customValidator()
  {
    return (form:FormGroup)=>{
      const errors=[];
      if (!form.value.compare)
      {
        if (!form.value.name1)
            errors.push('name1')
        if (!form.value.date1)
            errors.push('date1')
      }
      else
      {
          ....
      }
      return errors.length ? {error:errors} : null
    }
  }

You can then structure your form as follows:

<form [formGroup]="form">
  <input formControlName="name1"/>
  <span *ngIf="hasError('name1')">*</span>

  <input formControlName="date1"/>
  <span *ngIf="hasError('date1')">*</span>
  <br/>
  <input type="checkbox" formControlName="compare"/>
  <br/>
  <input *ngIf="form.get('compare').value" formControlName="name2"/>
  <span *ngIf="hasError('name2')">*</span>
  <input *ngIf="form.get('compare').value" formControlName="date2"/>
    <span *ngIf="hasError('date2')">*</span>
</form>

An alternative approach is to use a customValidator that always returns null but manually sets errors on specific fields using setErrors method.

  customValidator()
  {
    return (form:FormGroup)=>{
      const errors=[];
      if (!form.value.compare)
      {
        if (!form.value.name1)
            errors.push('name1')
        if (!form.value.date1)
            errors.push('date1')
      }
      else
      {
         ....other logic...
      }
      form.get('name1').setErrors(errors.find(x=>x=='name1')?{error:"required"} : null)
      form.get('date1').setErrors(errors.find(x=>x=='date1')?{error:"required"} : null)
      form.get('name2').setErrors(errors.find(x=>x=='name2')?{error:"required"} : null)
      form.get('date2').setErrors(errors.find(x=>x=='date2')?{error:"required"} : null)
      return null
    }
  }

Answer 8

Consider implementing a customValidator that can handle multiple errors and check for errors across the entire form. This way, you can easily track which fields have errors by using an auxiliary function.

  form=new FormGroup({
    name1:new FormControl(),
    date1:new FormControl(),
    compare:new FormControl(),
    name2:new FormControl(),
    date2:new FormControl(),
  }, this.customValidator())

  hasError(error:string)
  {
    return this.form.errors ? this.form.errors.error.find(x=>x==error) : null
  }

  customValidator()
  {
    return (form:FormGroup)=>{
      const errors=[];
      if (!form.value.compare)
      {
        if (!form.value.name1)
            errors.push('name1')
        if (!form.value.date1)
            errors.push('date1')
      }
      else
      {
          ....
      }
      return errors.length ? {error:errors} : null
    }
  }

You can then structure your form as follows:

<form [formGroup]="form">
  <input formControlName="name1"/>
  <span *ngIf="hasError('name1')">*</span>

  <input formControlName="date1"/>
  <span *ngIf="hasError('date1')">*</span>
  <br/>
  <input type="checkbox" formControlName="compare"/>
  <br/>
  <input *ngIf="form.get('compare').value" formControlName="name2"/>
  <span *ngIf="hasError('name2')">*</span>
  <input *ngIf="form.get('compare').value" formControlName="date2"/>
    <span *ngIf="hasError('date2')">*</span>
</form>

An alternative approach is to use a customValidator that always returns null but manually sets errors on specific fields using setErrors method.

  customValidator()
  {
    return (form:FormGroup)=>{
      const errors=[];
      if (!form.value.compare)
      {
        if (!form.value.name1)
            errors.push('name1')
        if (!form.value.date1)
            errors.push('date1')
      }
      else
      {
         ....other logic...
      }
      form.get('name1').setErrors(errors.find(x=>x=='name1')?{error:"required"} : null)
      form.get('date1').setErrors(errors.find(x=>x=='date1')?{error:"required"} : null)
      form.get('name2').setErrors(errors.find(x=>x=='name2')?{error:"required"} : null)
      form.get('date2').setErrors(errors.find(x=>x=='date2')?{error:"required"} : null)
      return null
    }
  }

Change validators dynamically according to conditions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a carousel with material design aesthetics

Steps for adding a checkbox to an alertController in Ionic 4

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

Angular 2 form with ng2-bootstrap modal component reset functionality

How to dynamically track changes in Angular2 form fields: Using the formbuilder to

Filtering an array of objects based on another array of objects in Angular2 through the use of pipes

ESLint refuses to be turned off for a particular file

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

The issue persists in VSCode where the closing brackets are not being automatically added despite

Assign a true or false value to every attribute of an object

"Encountered a problem when trying to import stellar-sdk into an Angular

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

What is the method to access the value of a different model in ExpressJs?

Exploring the best practices for integrating Bootstrap into a Webpack and Angular2 project

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Utilizing Jquery Validation to Remove a Class Upon Form Validation Success

Set the variable value by clicking on another component within *ngFor in Angular 2

Adding a QR code on top of an image in a PDF using TypeScript

transferring information seamlessly in Ionic using Angular router without the need for navigation

Is it possible to close a tab while the chrome extension popup is still active?