フォーム内でチェックボックスが機能しないのはなぜですか？

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