Angular 2 双向绑定从 html 输入标签中删除名称属性

Question

当我在输入标签中进行双向绑定时，名称属性会从输入标签中删除。绑定元素是一个数组。

<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>

当我以上述方式编写时，name 属性被删除但是

<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>

这样name属性就保留下来了。第一个代码有什么问题？我正在将此表格发布到 Laravel 路线。

Answer 1

我像这样测试了你的初始代码

<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 它正在运行，应该是其他东西去掉你的名字。

编辑

我用 2.0.0 尝试了相同的代码，但可以正常工作。虽然我不知道你在这里显示的代码是如何工作的，因为在 2.0.0 angular 上不接受 *ngFor 上的 let 但 #

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

您可以找到工作的 plunkr here

我强烈建议您将 2.0.0 解决方案升级到 Angular 的最新版本。

Angular 2 双向绑定从 html 输入标签中删除名称属性

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

html

angular-ngmodel

laravel-5

angular2-forms

编辑