Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

Question

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the code snippet for my form and validation function:

  readonly closeFormGroup: FormGroup;


  constructor(
    formBuilder: FormBuilder,
  ) {
    this.closeFormGroup = formBuilder.group({
      notes: [null],
      reason: [1, Validators.required],
      checkBoxGroup: new FormGroup({
        checkBox1: new FormControl(false),
        checkBox2: new FormControl(false),
        checkBox3: new FormControl(false),
        checkBox4: new FormControl(false),
        checkBox5: new FormControl(false),
      } ,this.requireCheckboxesValidator())
    });
  }
  public requireCheckboxesValidator(): ValidatorFn {
    return function validate(formGroup: FormGroup) {
      let checked = 0;
      console.log(formGroup);
      Object.keys(formGroup.controls).forEach(key => {
         const control = formGroup.controls[key];

         if (control.value === true) {
           checked++;
         }
       });

      if (checked < 1) {
        return {
          requireCheckboxesToBeChecked: true,
        };
      }

      return null;
    };
  }

javascript angular typescript validation

Answer 1

Answer №1

If you're looking for a different strategy, consider subscribing to the valueChanges of your dropdown field. Then, if the selected value meets your criteria, use addValidator to apply a specific validator to your checkboxes form control. I appreciate your idea of incorporating a custom validator, which is indeed a more effective approach. Essentially, you want to apply the validator to the checkboxes only when a particular value is chosen from the dropdown. To achieve this, adjust your logic as follows:

Object.keys(formGroup.controls).forEach(key => {
   const control = formGroup.controls[key];

   if (control.value === true) {
     checked++;
   }
  let dropdownValue = undefined;
  if (key === 'dropdownFormControlKey') {
      dropdownValue = control.value;
  }
 });

if (checked < 1) { 
  return {
    requireCheckboxesToBeChecked: true,
  };
}

return null;
};

I recommend refraining from defining the validator function within your component. Instead, refer to this article for a more appropriate methodology - https://angular.io/guide/form-validation

Answer 2

If you're looking for a different strategy, consider subscribing to the valueChanges of your dropdown field. Then, if the selected value meets your criteria, use addValidator to apply a specific validator to your checkboxes form control. I appreciate your idea of incorporating a custom validator, which is indeed a more effective approach. Essentially, you want to apply the validator to the checkboxes only when a particular value is chosen from the dropdown. To achieve this, adjust your logic as follows:

Object.keys(formGroup.controls).forEach(key => {
   const control = formGroup.controls[key];

   if (control.value === true) {
     checked++;
   }
  let dropdownValue = undefined;
  if (key === 'dropdownFormControlKey') {
      dropdownValue = control.value;
  }
 });

if (checked < 1) { 
  return {
    requireCheckboxesToBeChecked: true,
  };
}

return null;
};

I recommend refraining from defining the validator function within your component. Instead, refer to this article for a more appropriate methodology - https://angular.io/guide/form-validation

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

Answer №1

Similar questions

Easily automate button clicks on a new tab website

Tips for adding additional rows or cells to a table with jQuery

Promise and Determination failing to produce results

JavaScript string representing the actual value of a string

Invoke a Google Apps Script through AJAX that necessitates authentication

Using React, retrieving the value of a checked radio button from the state

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Use the Google Maps API to dynamically add a marker via AJAX once the map has been initialized

Customizing table headers in Yajra Laravel Datatables

When attempting to navigate to a controller using Express.Router and Passport, encountering an undefined error with req.url.indexOf('?')

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

Every file downloaded through the iframe is automatically stored in a designated server folder

Looking to update the state of a nested object with useReducer?

AngularJS and IE8 don't play nice when it comes to handling dynamic content

Implementing useState to toggle the checked value of a checkbox in React

Using Node and Express to handle form submissions, we can create a POST request that sends data to the server

Comparing non-blocking setTimeout in JavaScript versus sleep in Ruby

Want to learn how to integrate React-pdf (@react-pdf/renderer) with TypeScript on NodeJS and Express JS?

The error message "ReferenceError: express is not defined" indicates that Node.js is

Enhancing user experience with dynamic search results: JQuery AutoComplete powered by XML