How to extract the values from multiple checkboxes in Angular version 10

Question

How to extract the values from multiple checkboxes in Angular version 10

app.component.html

<form #x="ngForm" (ngSubmit)="submit()">
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.a" #a="ngModel" type="checkbox" value="1">
            <label class="form-check-label" for="inlineCheckbox1">HELLO A</label>
        </div>
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.b" #b="ngModel" type="checkbox" value="2">
            <label class="form-check-label" for="inlineCheckbox1">HELLO B</label>
        </div>
    <div class="form-check form-check-inline">
            <input [(ngModel)]="details.c" #c="ngModel" type="checkbox" value="3">
            <label class="form-check-label" for="inlineCheckbox1">HELLO C</label>
        </div>

<button [disabled]="!x.valid" >Submit</button>

</form>

App.Component.ts

export class AppComponent implements OnInit {
details:{
    a:boolean,
    b:boolean,
    c:boolean
} = {
    a:null,
    b:null,
    c:null
}
constructor(){
}
submit(){
    console.log(this.details) //to get true or false if checked
 }

I am attempting to retrieve the checkbox status and values, intending to store the checked values in variables.

SAMPLE:

If checkboxes 1 and 3 are selected: var x = 1 + 3 x = 4

angular typescript forms checkbox angular-reactive-forms

Answer 1

Answer №1

When you use Object.keys(details), it returns an array containing the keys present in your object, such as ["a", "b", "c"].

Next, we iterate over this array using the map function which is similar to a for loop. The 'i' parameter represents the index and 'x' represents the current item in the array. For example, on the first iteration, x will be equal to "a" (since "a" is the first value in Object.keys(details)). We then check if the value corresponding to the key exists by using if(details[x]), which is equivalent to details["a"]. If the value is true, we add (i+1) to our total.

 let total = 0
    Object.keys(details).map((x,i)=>{
    if(details[x]){
     total = total + (i+1)
    
    }
    
    })

Answer 2

When you use Object.keys(details), it returns an array containing the keys present in your object, such as ["a", "b", "c"].

Next, we iterate over this array using the map function which is similar to a for loop. The 'i' parameter represents the index and 'x' represents the current item in the array. For example, on the first iteration, x will be equal to "a" (since "a" is the first value in Object.keys(details)). We then check if the value corresponding to the key exists by using if(details[x]), which is equivalent to details["a"]. If the value is true, we add (i+1) to our total.

 let total = 0
    Object.keys(details).map((x,i)=>{
    if(details[x]){
     total = total + (i+1)
    
    }
    
    })

Answer 3

Answer №2

The Element:

export class AppComponent {
  information: Record<'x' | 'y' | 'z', boolean> = {
    x: false,
    y: false,
    z: false
  };

  public get totalNumber(): number {
    const numberMap = { x: 1, y: 2, z: 3 };
    return Object.entries(this.information)
      // filter only the true entries
      .filter(([_key, value]) => value)
      // map the true keys to an array of numbers
      .map(([key]) => numberMap[key])
      // add a default value to prevent reduce error if none selected `[].reduce()`
      .concat(0)
      // calculate the sum of numbers using reduce
      .reduce((prev = 0, curr) => prev + curr)
  }

  submitForm() {
    console.log(this.totalNumber);
  }
}

The Format:

<form #elementForm="ngForm" (ngSubmit)="submitForm()">
    <div class="form-check form-check-inline">
        <input
          id="informationX"
          name="x"
          [(ngModel)]="information.x"
          type="checkbox" />
        <label class="form-check-label" for="informationX">HELLO X</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="informationY"
          name="y"
          [(ngModel)]="information.y"
          type="checkbox" />
      <label class="form-check-label" for="informationY">HELLO Y</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="informationZ"
          name="z"
          [(ngModel)]="information.z"
          type="checkbox" />
        <label class="form-check-label" for="informationZ">HELLO Z</label>
    </div>

    <button [disabled]="elementForm.invalid" >
    Submit
  </button>
</form>

Check out this example on Stackblitz

Answer 4

The Element:

export class AppComponent {
  information: Record<'x' | 'y' | 'z', boolean> = {
    x: false,
    y: false,
    z: false
  };

  public get totalNumber(): number {
    const numberMap = { x: 1, y: 2, z: 3 };
    return Object.entries(this.information)
      // filter only the true entries
      .filter(([_key, value]) => value)
      // map the true keys to an array of numbers
      .map(([key]) => numberMap[key])
      // add a default value to prevent reduce error if none selected `[].reduce()`
      .concat(0)
      // calculate the sum of numbers using reduce
      .reduce((prev = 0, curr) => prev + curr)
  }

  submitForm() {
    console.log(this.totalNumber);
  }
}

The Format:

<form #elementForm="ngForm" (ngSubmit)="submitForm()">
    <div class="form-check form-check-inline">
        <input
          id="informationX"
          name="x"
          [(ngModel)]="information.x"
          type="checkbox" />
        <label class="form-check-label" for="informationX">HELLO X</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="informationY"
          name="y"
          [(ngModel)]="information.y"
          type="checkbox" />
      <label class="form-check-label" for="informationY">HELLO Y</label>
    </div>
    <div class="form-check form-check-inline">
        <input
          id="informationZ"
          name="z"
          [(ngModel)]="information.z"
          type="checkbox" />
        <label class="form-check-label" for="informationZ">HELLO Z</label>
    </div>

    <button [disabled]="elementForm.invalid" >
    Submit
  </button>
</form>

Check out this example on Stackblitz

How to extract the values from multiple checkboxes in Angular version 10

Answer №1

Answer №2

Similar questions

Retrieve the canvas coordinates for the images starting at lx and ending at rx on the x-axis, and

Is it possible to prevent casting to any by improving type definitions?

Preventing the upload of empty images in an angular application

The challenge of migrating from Angular2 Rc4 to Rc5: dealing with traceur bug

Is it possible to use Immutable named parameters with defaults in Typescript during compilation?

Changing a string into a date format with the help of JavaScript AngularJS

Why is it that the resource fails to load in an Angular localhost environment when making an http request?

Proceed with the for loop once the observable has finished

Suggesting prop names for styled-components using TypeScript

Trouble viewing Three.js content in Index.html

Is there a way to modify my port to 4900 using npm?

Applying these sorting functions to my specific scenario

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

Load an Ionic Toast Controller eagerly

"ng-new" is not currently present in the "@schematics/angular" collection

Having trouble getting automapper-ts registered in the Global Context within an Angular application - Reference to App is Undefined

Switching Next.js JavaScript code to Typescript

Using arrays as props in React with Typescript

Encountering a problem while attempting to host an Angular application on localhost:4200

What is the reason behind TypeScript not stating "When comparing a string to a null value, the condition will always return 'false'?"