Angular 5 Binding

Question

I am new to angular 5 and I am working on a task to calculate number of cars based on number of bags and passengers as each car have a specific capacity for each of them. So the user enter the both numbers then I show a dropdown menu for choosing car type if the selected type's capacity is less than the bags or passengers entered by the user I show another dropdown ..etc till the total capacity of cars for bags and passengers is equal or more than the ones entered by the user this is a little brief of what I am working on.

The Problem is: If the user selected the first car and the capacity is less than the entered data for passengers and bags numbers it shows another field but the value doesn't appear in the first field till I select another car from the next field then I go back to select value of first field again (I know it's already in the array I've already checked that but the value is not appearing on the select box).

What I am Trying to achieve is showing the value in the first field whenever I choose it not after selecting the second or third value and then reselect it again.

     printType2(){
// at the first time this function is executed the carsToBeAdd array only has one empty object
          let totalCapacityPassengers = 0;
          let totalCapacityBags = 0;
          console.log(this.carsToBeAdded);
          for(let i =0;i < this.carsToBeAdded.length; i++){
            if(!isNaN(Number(this.carsToBeAdded[i].NumberOfPassengers))  && !isNaN(Number(this.carsToBeAdded[i].NumberOfBags))){
            totalCapacityPassengers +=Number(this.carsToBeAdded[i].NumberOfPassengers);
            totalCapacityBags += Number(this.carsToBeAdded[i].NumberOfBags);
          }
          }  
          console.log(totalCapacityBags);
          console.log(totalCapacityPassengers);
        if((totalCapacityPassengers < this.booking.numOfPassengers || totalCapacityBags < this.booking.numOfBags)&& this.carsToBeAdded[this.carsToBeAdded.length-1].id){


            this.carsToBeAdded.push({});
          }
          else
          {
            console.log('You got the right number');
          }


        }

Here is the component.Html part

 <div class="form-group row" *ngFor="let x of carsToBeAdded;let i=index">
      <label class="col-2 col-form-label">Car #{{i+1}} Type</label>
      <div class="col-10">
          <select class="form-control" name="car_type_id" [(ngModel)]="carsToBeAdded[i]" (change)="printType2()" required>
            <option *ngFor = "let type of carTypes" [ngValue]="type">{{ type.model+' '+type.manufacturer }}</option>
          </select>

      </div>
    </div>

Here is my whole component in case you wanna take a look : Angular component

I might recommend you throw this into a plunker so people can run this to help you. Your question is quite confusing — Syntactic Fructose, Apr 17 '18 at 17:31
@SyntacticFructose I added it and that makes more sense thanks ! — Bassem, Apr 17 '18 at 17:45
That's not what I meant lol, Your question has too much text and I can assure you no one will look through 700 lines of code to help you. Your best bet is to pinpoint your problem and trim your question to break down what you want, what you tried, and what doesnt work. You're jumping around about all of this car information which we have no context of, try to focus the specific issue which relates to angular — Syntactic Fructose, Apr 17 '18 at 17:48

score 0 · Answer 1 · answered Apr 17 '18 at 18:29

I think the issue here is that your ngModel object does not match your ngValue object i.e. ngModel is a Car object and the ngValue seems to be a CarType. You should add the type to the Car object and use that to indicate what is expected.

<div class="form-group row" *ngFor="let x of carsToBeAdded;let i=index">
    <label class="col-2 col-form-label">Car #{{i+1}} Type</label>
    <div class="col-10">
        <select class="form-control" name="car_type_id" [(ngModel)]="carsToBeAdded[i].type" (change)="printType2()" required>
            <option *ngFor="let type of carTypes" [ngValue]="type">{{ type.model+' '+type.manufacturer }}</option>
        </select>
    </div>
</div>

I tried this but it never helped ! thanks for your effort – Bassem Apr 18 '18 at 11:12 — Bassem, Apr 18 '18 at 11:12

Angular 5 Binding

1 Answers1