Angular 5 - динамическое добавление строк очищает выбор в таблице

Я новичок в Angular, и я играю с некоторыми функциями Angular. Изучая двустороннюю привязку, я создал таблицу с динамическим добавлением строк одним нажатием кнопки. Я заметил, что выбор других строк очищается в тот момент, когда я добавляю новую строку, после нескольких проб и ошибок я обнаружил, что виновником был <form>, и когда я удалил тег, он работал правильно. Я включил FormModule в импорт NGModule и все еще вижу то же поведение.

Может кто-нибудь объяснить, как мне использовать таблицу внутри <form> без этой ошибки. Объяснение того, почему это происходит, также высоко ценится.

Пожалуйста, найдите мой созданный плункер ниже

https://plnkr.co/edit/5YPn88pNOhVoPJA8kSBj?p=preview

Спасибо.


javascript angular html angular5 angular4-forms
person Nishant    schedule 28.11.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема не в form, а в input names

name должно быть другим,

Что вы можете сделать, так это добавить index к loop, а затем изменить name="soc1" на name="soc1{{i}}".

Вот решение:

<tr *ngFor="let dat of arr; let i=index;">
    <td>
        <select name="soc1{{i}}" [(ngModel)]="dat.it">
            <option value="PP">PP</option>
            <option value="PQ">PQ</option>
          </select>
    </td>
    <td> <select name="soc2{{i}}{{i}}" [(ngModel)]="dat.bit">
            <option value="PP">PP</option>
            <option value="PQ">PQ</option>
          </select></td>
    <td><button name="Name" (click)="addRow()">Add</button></td>
</tr>

РАБОЧАЯ ДЕМО

person Vivek Doshi    schedule 28.11.2017
comment
Спасибо за это ... Только один вопрос, почему это работало вне формы и не работало внутри тега формы? Почему есть разница в поведении? - person Nishant; 28.11.2017
comment
Внешняя форма не заботится о входном имени, все они обрабатываются по-разному. - person Vivek Doshi; 28.11.2017