Angular 5, как получить значения флажков

Question

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

1) Все флажки отмечены, когда я нажимаю на один флажок.

2) Значение поля 'target' в консоли показывает «true» или «false»", на основании выбора.

<article class="mb-2 mb-md-4">
        <header class="border-bottom mb-3">
            <h6 class="mb-3"><i aria-hidden="true" class="fa fa-chevron-circle-right mr-2 text-primary"></i>Purpose of Claim</h6>
            <br> The Claim is made against the carrier for:
            <br> (Please tick as appropriate)
        </header>
        <label class="custom-check text-left flex-row">
            <input type="checkbox" id="Loss" value="Loss" name="purpose" [(ngModel)]="purpose" ><span class="checkmark"></span><strong class="font-weight-medium pl-2">Loss</strong>
        </label>
        <label class="custom-check text-left flex-row">
            <input type="checkbox" id="Damage" value="Damage" name="purpose" [(ngModel)]="purpose"><span class="checkmark"></span><strong class="font-weight-medium pl-2">Damage</strong>
        </label>
        <label class="custom-check text-left flex-row">
            <input type="checkbox" id="Incomplete" value="Incomplete" name="purpose" [(ngModel)]="purpose" ><span class="checkmark"></span><strong class="font-weight-medium pl-2">Incomplete
                Item</strong>
        </label>
    </article>

Answer 1

использовать тег формы в html и в вызове класса: form.controls['purpose'].value;

Answer 2

В классе:

@Component(..)
class FooComponent {
    public items: Array<{purpose: boolean}> = [
        {purpose: true},
        {purpose: false},
        {purpose: true},
        {purpose: false}
    ];
}

Шаблон:

<code><div *ngFor="let item of items; let i = index">
    <input type="checkbox" name="name-{{i}}" [(ngModel)]="item.purpose" />
</div>

<pre>
    {{items | json}}