Passing checkbox value to array in Angular

Question

I'm working on a solution where each of the inputs, generated depending on the passenger number, gets additional checkboxes. I want to pass the value of each checkbox and bind it to the input next to it. The plan is to eventually end up with an array in which I have the value of the input field + each checkbox value. I am not sure how to move forward with this. For now, I have:

COMPONENT.HTML:

<li *ngFor="let passenger of createRange(showStorage.passengersNumber); let i=index"><input type="text" [(ngModel)]="passengersData[i]" placeholder="Name and surname">
<input type="checkbox" (click)="addChild($event)">Child
<input type="checkbox" (click)="addLuggage($event)">Luggage
</li>

COMPONENT.TS

  constructor() {
    this.passengersData = [];
  }

  public passengersData: any[];
  public luggageCounter: number = 0;
  public childrenCounter: number = 0;

  createRange(number){
  var items: number[] = [];
  for(var i = 1; i <= number; i++){
     items.push(i);
  }
  
  return items;
}

  addLuggage(event) {
    console.log("Added luggage");
    this.luggageCounter++
  }

  addChild(event) {
    this.childrenCounter++
    console.log(event);
  }

Thanks for any help!

STACKBLITZ: https://stackblitz.com/edit/flight-date-picker-with-service-done-qfmn6p

Adrian Brand · Accepted Answer · 2020-06-27 06:03:20Z

1

Use an array with a name property and boolean properties for child and luggage and regenerate the array only when the number of passengers is updated retaining the previous passengers.

Here is a working StackBlitz https://stackblitz.com/edit/angular-ivy-s7dtu4?file=src%2Fapp%2Fapp.component.ts

Number of passengers <input type="text" [ngModel]="passengers.length" (ngModelChange)="updateNumOfPassengers($event)">
<li *ngFor="let passenger of passengers; let i=index">
  <input type="text" [name]="'name_' + 1" [(ngModel)]="passenger.name" placeholder="Name and surname">
  <input type="checkbox" [checked]="passenger.child" (change)="passenger.child = !passenger.child">Child
  <input type="checkbox" [checked]="passenger.luggage" (change)="passenger.luggage = ! passenger.luggage">Luggage
</li>

  passengers = [];

  updateNumOfPassengers(input: string) {
    const numOfPassengers = parseInt(input);
    if (!isNaN(numOfPassengers) && numOfPassengers >= 0) {
      const passengersToAdd = numOfPassengers - this.passengers.length;
      if (passengersToAdd > 0) {
        this.passengers = [...this.passengers, ...Array.from({ length: passengersToAdd }, _ => ({ name: '', child: false, luggage: false }))];
      } else if (passengersToAdd < 0) {
        this.passengers = this.passengers.filter((_, index) => index < numOfPassengers);
      }
    }
  }

edited Jun 27, 2020 at 6:03

answered Jun 25, 2020 at 23:24

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JoseTurron Over a year ago

thanks for this solution but, maybe I'm doing something wrong - apparently the code crashes the website. I tried this on stackblitz and in visual studio code and it both cases the website stops on infinite loading. I added a missing quotation mark after let i=index. Can you please check again what's the issue here?

Adrian Brand Over a year ago

I haven't tested the code, I might try run up a StackBlitz tomorrow, it is way too late on Friday night today.

Adrian Brand Over a year ago

This was never going to work, each time change detection runs the createRange function will create a new array.

Adrian Brand Over a year ago

use passengers = Array.from({ length: numOfpassengers }, _ => ({ name: '', child: false, luggage: false }));

Adrian Brand Over a year ago

passengers = Array.from({ length: parseInt(localStorage['numOfPassengers']) }, _ => ({ name: '', child: false, luggage: false }));

is all you need, no need for the function at all, just declare the passengers array.

|

Collectives™ on Stack Overflow

Passing checkbox value to array in Angular

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related