Angular 2 Флажки ngFor ngModel Двусторонняя привязка данных в форме редактирования

Я пытаюсь создать форму, позволяющую редактировать текущую выбранную задачу. Формы заполняют данные из выбранной задачи.

У меня есть флажки, которые используют ngModel для двусторонней привязки данных.

У меня также есть флажки на ngFor, которые используют ngModel для двусторонней привязки данных.

Флажки, которые используют ngModel без ngFor, ведут себя так, как я предполагал. Если флажки изменяются (отмечены/не отмечены), они будут сброшены обратно к значению, которое было изначально установлено после нажатия кнопки отмены.

__________МОЯ ПРОБЛЕМА:__________

Флажки, использующие ngModel с ngFor, ведут себя по-разному. Если флажки изменяются (отмечены/не отмечены), оно сохранит любое значение, установленное в данный момент, после нажатия кнопки отмены.

Я бы хотел, чтобы он сбрасывал свое значение, если нажата кнопка отмены.

__________ВОПРОС__________

Почему флажки внутри ngFor ведут себя иначе, чем флажки не внутри ngFor?

__________КОД НИЖЕ__________

Проверьте демонстрацию Plunker

Компонент task.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-task',
    templateUrl: './task.component.html',
})
export class TaskComponent implements OnInit {

    constructor() {}

    ngOnInit() {
    }

    staffs = [{id: 1, name: 'John', allowed: true, tasks: [] }, {id: 2, name: 'Ana', allowed: true, tasks: [] }];
    tasks = [
        {
            id: 1,
            name: 'Move object with mind',
            duration: 30,
            enablePoint: true,
            enableGodlike: false,
            staffs: [
                {
                    staffId: 1,
                    name: 'John',
                    allowed: true,
                },
                {
                    staffId: 2,
                    name: 'Ana',
                    allowed: true,
                }
            ]
        }
    ];

    id: number;
    name: string;
    enablePoint: boolean;
    enableGodlike: boolean;
    selectedTaskStaffs: any[];
    editTaskState: boolean = false;


    // TASKS
    showEditTaskForm(task) {
        this.id                    = task.id;
        this.name                  = task.name;
        this.enablePoint           = task.enablePoint;
        this.enableGodlike         = task.enableGodlike;
        this.selectedTaskStaffs    = task;
        this.editTaskState         = true;
    }


    editTask() {
        // run edit code here
        this.editTaskState = false;
    }


    closeEditTaskForm() {
        this.editTaskState = false;
    }

}

HTML-задача.component.html

<!-- EDIT TASK FORM -->
<div *ngIf="
      editTaskState === true"
      class="panel mar-top-4">

    <form (submit)="editTask()">

        <div class="row">
            <div class="small-12 columns">

                <h2 class="text-center mar-tb-2">Edit Task</h2>

                <input
                    [(ngModel)]="enablePoint"
                    name="enablePoint"
                    type="checkbox"
                    id="point">
                    <label for="point">Enable Point (if uncheck, this resets to initial value(true) after cancel)</label>
                <br>
                <input
                    [(ngModel)]="enableGodlike"
                    name="enableGodlike"
                    type="checkbox"
                    id="godlike"><label for="godlike">Enable Godlike (if check, this resets to initial value(false) after cancel)</label>
                <hr>


                <h2 class="text-center mar-tb-2">Staff</h2>
                <div class="row">
                    <div *ngFor="let staff of selectedTaskStaffs.staffs" class="small-6 columns">
                        <label>
                            <input
                            [(ngModel)]="staff.allowed"
                            name="staff{{staff.staffId}}"
                            type="checkbox">
                            {{staff.name}} (if uncheck, this <strong>DOESN'T</strong> resets to initial value(true) after cancel)
                        </label>
                    </div>
                </div>
                <hr>


                <div class="clearfix">
                    <button (click)="deleteTask()" type="button" class="button alert float-left">Delete</button>
                    <button type="submit" class="button float-right">Edit</button>
                    <button (click)="closeEditTaskForm()" type="button" class="button secondary float-right">Cancel</button>
                </div>


            </div>
        </div>
    </form>
</div>



<!-- LIST OF TASKS -->
<div    *ngIf="
            editTaskState === false"
            class="panel">

    <div class="row">
        <div class="small-12 columns">

            <h2 class="mar-top-3">Tasks</h2>

            <table>
                <thead>
                    <tr>
                        <th>Task</th>
                        <th>Duration</th>
                        <th>Point</th>
                        <th>Godlike</th>
                    </tr>
                </thead>
                <tbody>
                    <tr (click)="showEditTaskForm(task)" *ngFor="let task of tasks">
                        <td>{{task.name}} (click to edit)</td>
                        <td>{{task.duration}}</td>
                        <td>{{task.enablePoint}}</td>
                        <td>{{task.enableGodlike}}</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

</div>