dimanche 8 avril 2018

Checkbox is no more checkable after enable from component - Angular 2/4/5

Let me explain the scenario I want to achieve first!

I have a select box and assume it has values like i1, i2, i3, i4, i5. Besides the select box, I have a checkbox.

The checkbox will be disabled initially. Now, When I select i2 or i3, I want to enable the checkbox.

and if it other than i2 and i3, need to disable and uncheck the checkbox.

Here is my DOM code:

<mat-select placeholder="item" [(ngModel)]="selectedItem" [formControl]="selectedItem[ix]" required
            (ngModelChange)="allowCheck(ix, checkBox)">
    <mat-option *ngFor="let item of allItems()" [value]="item">
        
    </mat-option>
</mat-select>

<mat-checkbox [(ngModel)]="checkMe" #checkBox>
</mat-checkbox>

Here is my TS code:

allItems() {
    return [i1, i2, i3, i4, i5];
}

allowCheck(ix: number, checkBox: MdCheckBox) {
            checkBox.disabled   = true;
            if(this.selectedItem === 'i2' || this.selectedItem === 'i3') {
                checkBox.disabled   = false;
                checkBox.ripple.disabled   = false;
            }
            else {
                checkBox.disabled   = true;
                checkBox.checked    = false;
            }
        }

this solution enabling the checkbox, but I am not able to check it. Can someone please suggest what is wrong here?

Aucun commentaire:

Enregistrer un commentaire