Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 751
Zeal Nagar Avatar asked Nov 07 '22 18:11

Zeal Nagar


1 Answers

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.

like image 134
BogdanC Avatar answered Nov 15 '22 06:11

BogdanC