it-swarm.com.ru

* ng для сброса всех значений формы при добавлении нового элемента ввода

У меня есть приложение Angular2 с кнопкой, которая может добавить еще один кредит к моим кредитам. Мой * ngFor также довольно прост:

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

myLoans - это массив объектов Loan с параметрами 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 или любое значение, которое я установил в конструкторе для объекта кредита.

Загрузка приложения показывает эту картинку

What now

ngModel работает при наборе числа

enter image description here

После нажатия кнопки "Legg til lån" значение первого входа сбрасывается

enter image description here

ngModel все еще работает для первого ввода, если я попытаюсь ввести другое число

enter image description here

У кого-нибудь есть идея, что здесь происходит?

7
Pål Skønberg Løvik

AJT_82 близка к проблеме в том, что неуникальные имена вызывают у вас проблему, однако вы можете сделать еще более простое исправление, и еще одно в соответствии с тем, что вы, вероятно, хотели, изменив HTML-шаблон этого шаблона на этот

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

Обратите внимание на изменение ввода имени в []. Это обеспечит сохранение в шаблоне ссылки на имя, при условии, что имя каждого кредита уникально, так же как и идентификатор.

Обновление: Если имя не уникально, вы можете добавить индекс к нему, чтобы сделать его уникальным, как это.

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

Я на 99% уверен, что вы используете форму без уникальных атрибутов name, так как ngModel работает. 

Атрибут name должен быть уникальным, чтобы оцениваться как отдельные поля. Angular на самом деле не заботится о ngModel в формах, но вместо этого смотрит на атрибут name

Обратите внимание, что атрибут name, который вы в данный момент установили: name="loan.name" на самом деле содержит только строковый литерал loan.name, а не фактическое значение вашей модели, поэтому имя не является уникальным.

Поэтому, когда вы выдвигаете новую переменную loan, все другие ссуды получают то же значение, что и вновь переданное значение, поскольку все поля оцениваются как одно и то же.

Это можно легко исправить, добавив индекс в атрибут имени, например:

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

Я попробовал ваш код, и он отлично работает для меня. Я предполагаю, что это может быть проблема с компилятором. Попробуйте обновить библиотеки ng2 и TypeScript до последней версии. Вот пример частичного файла tsconfig: 

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

Также избегайте использования «var» для объявления переменных. Используйте «let», чтобы сохранить область видимости переменной. Я думаю, что ваша проблема может быть из-за использования var. Если вы используете старый компилятор, он может испортить ваш объект.

0
Merih Taze

Значение ввода становится равным нулю, потому что вы объявили [(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


Мое мнение: использование ngModel внутри * ngFor - это плохая практика, есть другой способ выполнить ту же задачу, используя событие (click) и Angular Selector. Попробуйте это вместо этого:

<input #loan ..>
<button (click)="addLoan(loan.value)">Add Loan</button>
0
Cassiano

@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, вы очень хорошо объяснили причину!

0
MKJ