When setting the Checkbox component to disabled while the form is marked as touched, the k-invalid class is applied to the checkbox control.
That's because of the implementation of the isControlInvalid property:
public get isControlInvalid(): boolean {
return this.control && this.control.touched && !this.control.valid;
}
According to the Angular source code:
/**
* A control is `valid` when its `status` is `VALID`.
*
* @see {@link AbstractControl.status}
*
* @returns True if the control has passed all of its validation tests,
* false otherwise.
*/
get valid(): boolean;
So valid() returns false when `status` is DISABLED.
The `isControlInvalid`property should better implemented like this:
public get isControlInvalid(): boolean {
return this.control && this.control.touched && this.control.invalid;
}
Please check this Stackblitz: https://stackblitz.com/edit/angular-dznoe1xj?file=src%2Fapp%2Fapp.component.ts
Today the checkbox styles work only if we place the label behind the input and connect them use id + for attribute:
<input type="checkbox" id="ch1" class="k-checkbox" checked />
<label class="k-checkbox-label" for="ch1">Checkbox 1</label>Problem:
While it works most times, it quite difficult to ensure a unique id inside an angular component. We have to ensure, it's unique over all currently rendered components.
A clean solution would require something like this:
// MyComponent
let componentIndex = 0;
class MyComponent {
checkboxId: `my-component-${componentIndex++}-checkbox`;
}
// Template
<input type="checkbox" [id]="checkboxId" class="k-checkbox" checked />
<label class="k-checkbox-label" [for]="checkboxId">Checkbox 1</label>Feature request:
Support implicit label association like so:
<label class="k-checkbox"><input type="checkbox" /> My label</label>