Angular - input radio buttona zaznacza się dla całego div

Jak udało się poprzedni problem tak szybko rozwiązać, to może szybko pójdę za ciosem:). Przypadek jest następujący: w miejsce ukrytego inputa radio buttona podstawiłem konkretne obrazki, które zmieniają się po kliknięciu (to <a> przed <img> konieczne na potrzeby explorera, bo bez tego event się w ogóle nie włączy). Problem w tym, że jeśli klikniemy gdziekolwiek na divie questionnaire-option poza radiobuttonem false, automatycznie jako event.target zaznacza się input-true-{{record.controlName}}. W praktyce wygląda to tak, że jeśli operujemy stricte na radiobuttonach, wszystko wygląda w porządku, ale wystarczy wyjechać myszką lekko w prawo, poza ich obręb, i automatycznie zostaje zaznaczony radiobutton z true.

Idealnie byłoby, gdyby tylko na poziomie labela dało się zaznaczyć któryś z radiobuttonów. Próbowałem jeszcze zawęzić div, ale nawet jeśli tak się zrobi, problem pozostaje.

<div class="questionnaire-option">
    <label class="hand">
        <input id="input-true-{{record.controlName}}" type="radio"
            (change)="handleChange(record, $event)" formControlName="{{record.controlName}}" [value]="true">
        <a (click)="handleChange(record, $event)"><img id="img-true-{{record.controlName}}" class="pb-1"
                src="./assets/ic_radio_select.svg"></a>
        <span class="custom-blue"> Yes</span>
    </label>
    <label class="hand ml-2">
        &nbsp;<input id="input-false-{{record.controlName}}" type="radio"
            (change)="handleChange(record, $event)" formControlName="{{record.controlName}}" [value]="false">
        <a (click)="handleChange(record, $event)"><img id="img-false-{{record.controlName}}" class="pb-1"
                src="./assets/ic_radio_select.svg"></a>
        <span class="custom-blue"> No</span>
    </label>
    <div class="display-inline ml-4" [@slideInOut]="record.slideInOutAnimation">
        <img class="pb-1" src="./assets/ic_error.svg"> <span class="color-error ml-2">Please
            select
            <i>Yes</i>
            or
            <i>No</i>.</span>
    </div>
</div>

CSS zmodyfikowałem następująco:

// ukrywa input
[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

[type="radio"] + img {
    cursor: pointer;
}

Gdyby ktoś miał podobny problem w przyszłości, zostawiam rozwiązanie. Usunąłem event click z inputu i dodałem go do label. Konieczne jest także dodanie [attr.disabled]="true" do input. Efekt uboczny - tylko na IE nie jest uzupełniana wartość forma jako true/false, trzeba to zrobić ręcznie na poziomie metody handleChange. Nie jestem przekonany, czy to rozwiązanie było najlepszą opcją na podmienienie inputu konkretnymi obrazkami i ich dynamicznym podmienianiem (też w metodzie handleChange), ale działa bez zarzutu.

<div class="questionnaire-option">
    <label id="label-true-{{option.controlName}}" (click)="handleChange(option, $event)" class="hand">
        <input [attr.disabled]="true" class="hand" type="radio" formControlName="{{option.controlName}}"
            [value]="true">
        <a><img id="img-true-{{option.controlName}}" class="pb-1" src="./assets/ic_radio_select.svg"></a>
        <span class="custom-blue"> Yes</span>
    </label>
    <label id="label-false-{{option.controlName}}" (click)="handleChange(option, $event)" class="hand ml-2">
        &nbsp;<input [attr.disabled]="true" class="hand" type="radio" formControlName="{{option.controlName}}"
            [value]="false">
        <a><img id="img-false-{{option.controlName}}" class="pb-1" src="./assets/ic_radio_select.svg"></a>
        <span class="custom-blue"> No</span>
    </label>
    <div class="display-inline ml-4" [@slideInOut]="option.slideInOutAnimation">
        <img class="pb-1" src="./assets/ic_error.svg"> <span class="color-error ml-2">Please
            select
            <i>Yes</i>
            or
            <i>No</i>.</span>
    </div>
</div>