Search code examples
htmllaravel-5angular2-formsangular-ngmodel

Angular 2 Two way binding removes name attribute from html input tag


When I am two way binding in input tag, name attribute gets removed from input tag. A binding element is an array.

<div class="row" *ngFor="let box of boxs; let boxindex=index ">
<div class="col-sm-4">
<label>Boxs</label>
<input type="text" name="count[{{boxindex}}]" [(ngModel)]="box[boxindex]">
</div>
</div>

When I am writing in above way name attribute get removed but

<div class="row" *ngFor="let box of boxs; let boxindex=index ">
<div class="col-sm-4">
<label>Boxs</label>
<input type="text" name="count[]" [(ngModel)]="box[boxindex]">
</div>
</div>

in this way name attribute remains. What is Wrong in first code? I am Posting this form to Laravel Route.


Solution

  • I tested your initial code like this

    <div *ngFor="let box of boxs; let boxindex=index ">
      <div>
       <label>Boxs</label>
       <input #input type="text" name="count[{{boxindex}}]" placeholder={{input.name}}>
      </div>
    </div>
    

    on plunkr here and it's working, should be something else taking out your name.

    Edit

    I tried the same code with 2.0.0 an is working. Although I don't know how the code you displayed here is working, because on 2.0.0 angular was not accepting let on *ngFor but #

    <div *ngFor="#box of boxs; #boxindex=index ">
    

    You can find the working plunkr here

    My strong advice for you is to upgrade your 2.0.0 solution to a recent version of Angular.