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

Retrieve the content of a text field with jQuery

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

Searching for a specific set of rows within an array? Look no further than jQuery and JavaScript

Deleting files with a dedicated function (Dropzone.js)

How can you direct a user to a specific page only when certain conditions are met?

The submission of the form with the ID "myForm" using document.getElementById("myForm").submit() is

Switching button class when hovering over another div

Repeated URL causes Node to redirect

How can we modify this function to interpret multiple selections at once?

Issues with Vite's global import feature not functioning properly in a production build

A Complication Arises with Browser Functionality When Embedding an Iframe within

A guide on implementing getStaticProps using TypeScript in Next.js

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Mastering the correct usage of the submitHandler method in the jQuery validation plugin

What are the consequences of altering meta tags once the DOM has fully loaded?

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

What is the best way to switch the direction of the arrows based on the sorting order?

Unable to confirm form validation with Vue

What causes the appearance of an HTTP header error and how can we identify the bug?

Display pie charts on a Google Map