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

Steps to implement the click functionality on the alert controller and modify the language in Ionic 4

Creating a module within a component in angular - step by step guide

Customizing the renderInput of the Material UI DatePicker

Creating a personalized menu using Nextron (electron) - Step by step guide

What is the best way to utilize RxJs for streaming HostListener events?

Customize your Kendo Chart in Angular2 by selecting the axis for your data

What is the most efficient way to dynamically load a script file before proceeding with the rest of the code execution?

Conceal multiple parameters within routing for added security

When the React Native Expo app is running, the TextInput form is covered by the keyboard

Comprehending the concepts of Observables, Promises, using "this" keyword, and transferring data within Angular with TypeScript

Is it feasible to alter the TypeScript interface for the default JavaScript object (JSON)?

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

Send information to the child.component.ts file, not the child template

Tips for detecting the end of a scroll view in a list view

ngx: navigate to the specified URL once the user has been successfully logged in

What is the method for defining a function within a TypeScript namespace?

Tips for effectively narrowing the `undefined` type

Sorting items in Ag-Grid according to user's preference

Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

BarChart is failing to exhibit data in tooltips when using dynamic keys