首页 文章

* ng在添加新输入元素时重置所有表单值

提问于
浏览 次
7

我有一个带有按钮的Angular2应用程序，可以为我的贷款添加另一笔贷款 . 我的* ngFor也非常简单：

<div *ngFor="let loan of myLoans">
      <label>{{loan.name}}</label>
      <input type="text" name="loan.name" [(ngModel)]="loan.amount">
    </div>

myLoans 是具有 name 和 amount 参数的贷款对象数组 . 我的按钮也很简单 .

<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>

addLoan（）函数：

addLoan(): void{
    var newLoan = new Loan();
    this.myLoans.push(newLoan);
}

我的问题是，当我在列表中添加新贷款时，我在其他贷款的输入字段中的任何值都会回到0或我在贷款对象的构造函数中设置的任何值 .

Loading the app shows this picture

What now

ngModel is working when typing in a number

enter image description here

After pressing the "Legg til lån" button, the value of the first input is reset

enter image description here

ngModel is still working for the first input if I try putting in another number

enter image description here

任何人都知道这里发生了什么？

angular typescript data-binding ngfor ng-modal

5 回答

  • 13

    AJT_82接近问题，因为非唯一名称会导致您出现问题，但是您可以通过将模板html更改为此来进行更简单的修复，以及您可能想要的更多修复 .

    <div *ngFor="let loan of myLoans">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name" [(ngModel)]="loan.amount">
</div>

    注意在[]中输入名称的更改 . 这将确保模板维护到名称的链接，并且只要每个贷款的名称是唯一的，标识符也是唯一的 .

    Update: 如果name不是唯一的，您可以为其添加索引以使其唯一 .

    <div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>
    回复于
  • 0

    我99％确定你使用的是表单，没有唯一的 name 属性，因为 ngModel 有效 .

    name属性必须是唯一的，才能作为单独的字段进行评估 . Angular并不真正关心表单中的 ngModel ，而是查看 name 属性 .

    请注意，您当前设置的name属性： name="loan.name" 实际上只包含字符串文字 loan.name 而不是模型的实际值，因此名称不是唯一的 .

    因此，当您推送新的 loan 时，所有其他贷款都会获得与新推送值相同的值，因为所有字段都被评估为同一个 .

    这可以通过在name属性中添加索引来轻松修复，例如：

    <div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" name="loan.name{{i}}" [(ngModel)]="loan.amount">
</div>
    回复于
  • 0

    我已经尝试过你的代码，它对我来说很好 . 我假设它可能是编译器问题 . 尝试将ng2和typescript库更新到最新版本 . 这是一个部分tsconfig文件的示例：

    {
  "compilerOptions": {
    "target": "es5",
    "typeRoots": ["node_modules/@types/"],
    "types": [
      "node",
      "es6-shim"
    ]
  }
}

    还要避免使用“var”进行变量声明 . 使用“let”来保持变量范围 . 我认为你的问题可能是因为使用了var . 如果您使用的是旧编译器，则可能会弄乱您的对象 .

    回复于
  • 4

    输入的值变为零，因为您已将[（ngModel）]声明为* ngFor的迭代器对象 . 当您将空白对象推送到myLoans的数组时，ngModel将输入更改为零（金额的默认值）

    例：

    myLoans = [0, 1, 2, 3]

    刷新页面时，[（ngModel））将数组的最后一个值绑定到输入（3） .

    如果你在输入上写125，

    然后你也改变了最后一个数组的值

    myLoans = [0, 1, 2, 125]

    如果推送一个新元素，Angular将使用最后一个数组值刷新输入

    myLoans = [0, 1, 2, 125, 0]

    Input.value现在= 0

    我的意见：在* ngFor中使用ngModel是一个不好的实践，还有另一种方法可以使用（click）事件和Angular Selector执行相同的任务 . 试试这个：

    <input #loan ..>
<button (click)="addLoan(loan.value)">Add Loan</button>
    回复于
  • 0

    @Joo_Beck建议使用 [name]=loan.name 而不是 name='loan.name' . 但这对我没有用 . 我刚刚添加了一个索引 {{i}} ，其名称如下所示，它完美无缺 .

    <div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" name="loan.name{{i}}" [(ngModel)]="loan.amount">
</div>

    @ AJT_82建议我使用的解决方案 . 感谢！

    谢谢@Cassiano你很好地解释了原因！

    回复于

相关问题