How do I make a validator for a checkbox using a formBuilder Array in angular 9?

Question

I need to validate that my user selects at least one viewport. I simply added the validator.required for the input but for the checkbox in an array I am not sure how to validate it.

public createForm(): FormGroup {
    return this.formBuilder.group({
        urlInput: ['', [ Validators.required, Validators.pattern(URL_VALIDATOR) ]],
        children: [false, []],
        viewport: this.formBuilder.array(this.viewports.map(x => false))
    });
}

I used this to create the checkbox:

 public ngOnInit(): void {
    this.urlForm = this.createForm();
    const checkboxControl = this.urlForm.controls.viewport as FormArray;

I realized I can simply add the Validator.required as well into the viewport however it is requiring every single item to be check before in becomes valid. viewport: this.formBuilder.array(this.viewports.map(x => [false, [Validators.required]])) — marquee
– marquee, Commented Jun 25, 2021 at 23:02
To verify, you will have a list of checkboxes and you require that at least 1 is checked? — Brian Smith
– Brian Smith, Commented Jun 25, 2021 at 23:17

Priscila Anjos · Accepted Answer · 2021-06-26 00:01:16Z

You could create a custom validator for your form:

Validator:

export function minimumNeededSelected(
  controlArrayName: string,
  quantityNeededSelected: number
) {
  return (formGroup: FormGroup) => {
    const controlArray = formGroup.controls[controlArrayName];

    let quantitySelected = 0;
    (controlArray as FormArray).controls.forEach(control => {
      if (control.value) {
        quantitySelected++;
      }
    });

    if (quantitySelected < quantityNeededSelected) {
      controlArray.setErrors({ minimumNeededSelected: true });
    } else {
      controlArray.setErrors(null);
    }
  };
}

How to use:

public createForm(): FormGroup {
    return this.formBuilder.group({
        urlInput: ['', [ Validators.required, Validators.pattern(URL_VALIDATOR) ]],
        children: [false, []],
        viewport: this.formBuilder.array(this.viewports.map(x => false))
    },
    {
      validators: [minimumNeededSelected('viewport', 1)]
    });
}

This way your formArray will get an error of 'minimumNeededSelected' if there is not enough items selected.

Brian Smith · Accepted Answer · 2021-06-25 23:27:25Z

2

You can create a function that returns if a viewport is checked or not.

hasCheckedItem(): boolean {
    const viewports = this.urlForm.get('viewport') as FormArray;
    if (viewports) {
      viewports.controls.forEach(control => {
        if (control.value) {
          return true;
        }
      });
    }
    return false;
  }

You can then perform this check before a form submit or next action taken where this needs to be true.

answered Jun 25, 2021 at 23:27

Brian Smith

1,6661 gold badge18 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do I make a validator for a checkbox using a formBuilder Array in angular 9?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related