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

Question

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>

Günter Zöchbauer · Accepted Answer · 2017-03-15 09:09:56Z

2

A let is missing

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

answered Mar 15, 2017 at 9:09

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

seanEd Over a year ago

Haha woops, I thought it was something more fundamental like you cannot use string interpolation in the id field or something. Thanks it works now

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related