What is the best way to connect a series of checkboxes within a form utilizing Angular?

Question

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all.

Here is what I see in the console: {fruits: Array[0]}

What I was hoping for:

{fruits: Array[1]} // The number of items in the array should correspond to the number of checkboxes selected

You can take a look at an example on stackblitz for reference

javascript angular typescript

Answer 1

Answer №1

All the steps have been completed except for initializing the form

myForm: FormGroup = this.initializeModelForm();

The complete code snippet includes the console logging of the formArray value

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder } from '@angular/forms';

export interface Fruit {
  uid: string;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent   {
public checks = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

myForm: FormGroup = this.initializeModelForm();

constructor(
  public _fb: FormBuilder
) { }

initializeModelForm(): FormGroup{
  return this._fb.group({
    otherControls: [''],
    myChoices: new FormArray([])
  })
}

onCheckChange(event) {
  console.log(event);
  const formArray: FormArray = this.myForm.get('myChoices') as FormArray;

  /* Selected */
  if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(new FormControl(event.target.value));
  }
  /* unselected */
  else{
    // find the unselected element
    let i: number = 0;

    formArray.controls.forEach((ctrl: FormControl) => {
      if(ctrl.value == event.target.value) {
        // Remove the unselected element from the arrayForm
        formArray.removeAt(i);
        return;
      }

      i++;
    });
  }
  console.log(formArray.value);
}
}

Answer 2

All the steps have been completed except for initializing the form

myForm: FormGroup = this.initializeModelForm();

The complete code snippet includes the console logging of the formArray value

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder } from '@angular/forms';

export interface Fruit {
  uid: string;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent   {
public checks = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

myForm: FormGroup = this.initializeModelForm();

constructor(
  public _fb: FormBuilder
) { }

initializeModelForm(): FormGroup{
  return this._fb.group({
    otherControls: [''],
    myChoices: new FormArray([])
  })
}

onCheckChange(event) {
  console.log(event);
  const formArray: FormArray = this.myForm.get('myChoices') as FormArray;

  /* Selected */
  if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(new FormControl(event.target.value));
  }
  /* unselected */
  else{
    // find the unselected element
    let i: number = 0;

    formArray.controls.forEach((ctrl: FormControl) => {
      if(ctrl.value == event.target.value) {
        // Remove the unselected element from the arrayForm
        formArray.removeAt(i);
        return;
      }

      i++;
    });
  }
  console.log(formArray.value);
}
}

Answer 3

Answer №2

When considering an approach similar to Netanel Basal's, it is essential to modify the submit function for smoother operation. One way to achieve this is by structuring a Form with values such as:

{
  "otherControls": "",
  "myChoices": [
    false,
    true,
    false
  ]
}

Although the initial data may seem unattractive, the submit function can be adjusted to transform it into a more organized format:

submit(myForm) {
    if (myForm.valid) {
      const value = { ...myForm.value };
      value.myChoices = this.checks
        .filter((x, index) => myForm.value.myChoices[index])
        .map(x => x.value);
      this.result = value;
    }
  }

This modification will result in a cleaner output, like so:

{
  "otherControls": "",
  "myChoices": [
    "value2"
  ]
}

While the submit process may become slightly more complex, the form structure itself becomes streamlined and intuitive:

<form *ngIf="myForm" [formGroup]="myForm" (submit)="submit(myForm)">
  <div formArrayName="myChoices">
  <div *ngFor="let choice of myForm.get('myChoices').controls; let i=index" class="col-md-2">
    <label>
      <input type="checkbox" [formControlName]="i">
      {{checks[i].description}}
    </label>
  </div>
  </div>
  <button type="submit">submit</button>
</form>

This method eliminates the need for external functions and minimizes complications typically associated with dynamic forms. By setting up the form initially as:

initModelForm(): FormGroup {
    return this._fb.group({
      otherControls: [""],
      myChoices: new FormArray(this.checks.map(x => new FormControl(false)))
    });
  }

For further reference, see this StackBlitz demo

Answer 4

When considering an approach similar to Netanel Basal's, it is essential to modify the submit function for smoother operation. One way to achieve this is by structuring a Form with values such as:

{
  "otherControls": "",
  "myChoices": [
    false,
    true,
    false
  ]
}

Although the initial data may seem unattractive, the submit function can be adjusted to transform it into a more organized format:

submit(myForm) {
    if (myForm.valid) {
      const value = { ...myForm.value };
      value.myChoices = this.checks
        .filter((x, index) => myForm.value.myChoices[index])
        .map(x => x.value);
      this.result = value;
    }
  }

This modification will result in a cleaner output, like so:

{
  "otherControls": "",
  "myChoices": [
    "value2"
  ]
}

While the submit process may become slightly more complex, the form structure itself becomes streamlined and intuitive:

<form *ngIf="myForm" [formGroup]="myForm" (submit)="submit(myForm)">
  <div formArrayName="myChoices">
  <div *ngFor="let choice of myForm.get('myChoices').controls; let i=index" class="col-md-2">
    <label>
      <input type="checkbox" [formControlName]="i">
      {{checks[i].description}}
    </label>
  </div>
  </div>
  <button type="submit">submit</button>
</form>

This method eliminates the need for external functions and minimizes complications typically associated with dynamic forms. By setting up the form initially as:

initModelForm(): FormGroup {
    return this._fb.group({
      otherControls: [""],
      myChoices: new FormArray(this.checks.map(x => new FormControl(false)))
    });
  }

For further reference, see this StackBlitz demo

What is the best way to connect a series of checkboxes within a form utilizing Angular?

Answer №1

Answer №2

Similar questions

Is implementing client components in Server Side pages an effective strategy for optimizing SSR performance?

Merging Promises in Typescript

Get tabular information in xlsx format by utilizing the xlsx npm package for download

Javascript callback function cannot access variables from its parent function

What is the best way to prevent an HTML form from being submitted when a user is not logged in, but still allow submission when the user is signed

"Encountering a module not found issue while trying to

A guide on incorporating ng2-canvas-whiteboard into your Ionic 3 project

React components are failing to display data as expected

Storing the output of asynchronous promises in an array using async/await technique

Set every attribute inside a Typescript interface as non-mandatory

Encountered issue #98123: Failed to generate development JavaScript bundle during `gatsby develop` using Webpack

If the given response `resp` can be parsed as JSON, then the function `$

JavaScript and CSS tabs with smooth transition effect

What is the best way to integrate react-final-form with material-ui-chip-input in a seamless manner

The unit test is running successfully on the local environment, but it is failing on Jenkins with the error code TS2339, stating that the property 'toBeTruthy' is not recognized on the type 'Assertion'

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

identifiers that have been duplicated errors

Error: The URL constructor is unable to process /account as a valid URL address

Dynamic cell editing feature in PrimeNG table

Attempting to incorporate alert feedback into an Angular application