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

Unraveling JSON data retrieved from a MySQL query

Prevent a React component from unnecessarily re-rendering after a property has been set

KnockoutJS - Struggling to bind model from simple JSON array

Leveraging split and map functions within JSX code

How can you modify Jquery show_hide so that the page automatically scrolls to the bottom of the concealed field when the button is clicked?

Navigating through documents in Jhipster (Angular + Springboot)

Difficulty accessing files with Angular deployment in Nginx through Docker

Can files in a directory be listed using JavaScript without the need for HTML tags?

Utilizing traditional JavaScript variables within Express.js or Node.js: A comprehensive guide

Are the orders of events maintained when emitted using an event emitter?

Transforming a string into an array containing objects

What are the steps to employ a query string to display a specific image?

Is it possible to locate an element using regex in Python while using Selenium?

When using res.render to pass data to an EJS file and accessing it in plain JavaScript

Unexpected behavior: getElementById returning URL instead of element

When it comes to using the text() function, the statement encounters difficulty

What is the best way to pinpoint a specific Highcharts path element?

I have an HTML table with multiple cells containing inner HTML tables. I have implemented a function along with buttons to filter the main table, excluding the inner tables

How can I prevent anchors from performing any action when clicked in React?

Using Angular's FormControl with a Pipe