为什么复选框在表单内不起作用?
问题描述:
我有一个对象阵列为什么复选框在表单内不起作用?
pets = [{key: 'dog', isChecked: true}, {key: 'hamster', isChecked: false}, {key: 'cat', isChecked: false}];
和类似的复选框
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
value='{{pet}}'
[(ngModel)]='pet.isChecked'
(change)='check()'
/>
{{pet.key}} - {{pet.isChecked}}
</div>
但只要我开始把它形式
<form>
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
value='{{pet}}'
[(ngModel)]='pet.isChecked'
(change)='check()'
/>
{{pet.key}} - {{pet.isChecked}}
</div>
</form>
它停止正确显示内显示它。
我该如何使这个表单工作?
和
答
HTML:
<form>
<div *ngFor='let pet of pets'>
<input type='checkbox'
name='pets'
id="pets{{getRandom()}}"
[ngModel]="pet.isChecked"
value='{{pet}}'
(click)="$event.stopPropagation(); check();"/>
{{pet.key}} - {{pet.isChecked}}
</div>
</form>
TS:
function getRandom() {
return Math.random() * 1000;
}
你开始面对的问题,认罪e创建一个plnkr或jsfiddle以便更好地理解 – Viplock
@Viplock更新了问题。 –
'input.name'属性必须是唯一的https://plnkr.co/edit/6qgA1wnJOWgZUP0BGBmb?p=preview – yurzui