CODEWITHSUNDEEP
angularformshtml-tablengmodel
Mauro Ghiglia
Mauro Ghiglia

Reputation: 345

Angular table form hold only one value

I'm moving a quite old project, originally written in JS/JQuery to Angular. I have an Hotel form, to which I want the customer to be able to add as many room types he wants. The View looks like this:

<table id="rooms">
  <thead>
    <tr>
      <th>Room Type</th>
      <th>Beds</th>
      <th>Q.ty</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let room of HotelModel.rooms">
      <td><input [(ngModel)]="room.type" name="type" type="text"></td>
      <td><input [(ngModel)]="room.beds" name="beds" type="number" class="smallField"></td>
      <td><input [(ngModel)]="room.qty" name="qty" type="number" class="smallField"></td>
    </tr>
  </tbody> 
    <button type="button" (click)="onAddRoomType()">Add Room Type</button>
  </table>

The hotel.components is like this:

export class HotelComponent {
  title = 'numbers-smallstart';

  HotelModel : Hotel = new Hotel();
  rooms = [
    { type: 'Single', beds: 1, qty: 16 },
    { type: 'Double', beds: 2, qty: 32 },
  ];

  ngOnInit() {
    this.HotelModel.rooms = this.rooms;
  }
  
  onAddRoomType() {
    this.HotelModel.rooms.push({ type: '', beds: 0, qty: 0 });
  }

};

And the hotel.model is like this:

export class Hotel{
    // Fields with test values
    name : string = "Hotel Roma Sud";
    stars : number = 3;
    rooms : Array<any> = []
    roomsSold : number = 12000;
    arrivalsPresences : number = 15000;
    presences : number = 23000;
    
}

The model (the array of rooms) gets correctly updated, but it seems that the form can hold only one set of data. This way, I have a form that behaves like this: enter image description here How can I display the form's room lines?

Upvotes: 0

Views: 36

Answers (1)

Mauro Ghiglia
Mauro Ghiglia

Reputation: 345

Well, it seems I only needed an index into the form rows..

<tbody>
  <tr *ngFor="let room of HotelModel.rooms; let i = index">
    <td><input [(ngModel)]="room.type" name="type{{i}}" type="text"></td>
    <td><input [(ngModel)]="room.beds" name="beds{{i}}" type="number" class="smallField"></td>
    <td><input [(ngModel)]="room.qty" name="qty{{i}}" type="number" class="smallField"></td>
  </tr>
</tbody>

Upvotes: 0

Related Questions