Что не так с этой формой Angular, из-за которой она неожиданно сбрасывает выбранные значения в пользовательском интерфейсе?

В демонстрационных целях я создал это упрощенное приложение Angular, которое позволяет пользователям составлять список людей: https://plnkr.co/edit/1RFGlXgHLwik02MvbhCz?p=preview

Шаблон:

<form #peopleForm="ngForm">
<div *ngFor="let person of people">
   Name: <input type="text" name="name" placeholder="Name" [(ngModel)]="person.name">
 </div>
</form>

Составная часть:

export class App {
  people = [
    {
      name: 'Bob',
    }, 
    {
      name: 'Alice',
    }
  ];

  constructor() { }

  addPerson() {
    this.people.push({name: ''});
  }
}

У него две ошибки:

  • Элементы списка сбрасываются в пользовательском интерфейсе при нажатии кнопки «Добавить человека».
  • Имя последнего пользователя отображается дважды

У меня есть базовый JSON, который также печатается на странице, и он выглядит правильно, но остальная часть пользовательского интерфейса неверна. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Обновление: по какой-то причине он работает должным образом, когда я удаляю внешний тег <form>. Кто-нибудь знает, почему?


angular angular4-forms
person Stewart    schedule 19.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Обновление: ngModel не работал, потому что вы не определили уникальное имя для своего ввода. Попробуй это

<div *ngFor="let person of people; let i=index">
   Name: <input type="text" name="name{{i}}" placeholder="Name" [(ngModel)]="person.name" >
   Gender:
   <select name="gender{{i}}" [(ngModel)]="person.gender">
     <option value=""></option>
     <option value="m">Male</option>
     <option value="f">Female</option>
   </select>
 </div>

Обновлен плункер

person JayDeeEss    schedule 19.10.2017
comment
Это односторонняя привязка. Мне нужна двухсторонняя привязка. Посмотрите на JSON и список людей под формой в вашем примере. Он не обновляется. - person Stewart; 19.10.2017

arrow_upward

arrow_downward

person    schedule
comment
Не отвечает на мой вопрос о том, почему он стирает выбранные значения в пользовательском интерфейсе. - person Stewart; 19.10.2017