爲什麼複選框在表單內不起作用？

Question

我有一個對象陣列

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> 

它停止正確顯示內顯示它。

我該如何使這個表單工作？

Plunkr link

和

Plunkr link with a form

Answer 1

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; 
}