CODEWITHSUNDEEP
htmlangular
seanEd
seanEd

Reputation: 1031

ngForm or plain HTML Form - variable length inputs using *ngFor

I am trying to do a variable length input form for ticket sales at which point I want to build that many input forms for a name and a gender for the guest, but I cannot think of how to do the id which must be unique using this method. I am currently trying to use this and getting mad errors:

Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token = at column 24 in [let guest of guests; i = index] in SellTicketComponent@315:22 ("" #f="ngForm"> --> ]*ngFor="let guest of guests; i = index"> "): SellTicketComponent@315:22 Parser Error: Unexpected token = at column 24 in [let guest of guests; i = index] in SellTicketComponent@315:22 (" ]id="{{guest[0]}}" [(ngModel)]="guest[0]" na"): SellTicketComponent@320:28

     <h5>How many tickets would you like? </h5>
     <input type="number" name="numGuests" min="1" max="10" [(ngModel)]="numPeople">

    <div *ngIf="numPeople > 1">
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
       <!--<div ngModelGroup="eventCreationData">-->
         <div *ngFor="let guest of guests; i = index">
           <div class="form-group">
             <label> Full name of guest: </label>
             <input type="text"
                    class="form-control"
                    id="{{guest[0]}}"
                    [(ngModel)]="guest[0]"
                    name="{{guest[0]}}"
                    required>
           </div>
       <!--</div>-->
         <div class="form-group">
           <label> Gender: </label>
           <select
             class="form-control"
             id="{{i}}"
             [(ngModel)]="guest[1]"
             name="{{i}}"
             required>
             <option *ngFor="let i of genders">
               {{i}}
             </option>
           </select>
         </div>
       </div>
     </form>

Upvotes: 2

Views: 439

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657406

A let is missing

<div *ngFor="let guest of guests; let i = index">

Upvotes: 2

Related Questions