Angular form for checking form is touched not working with the checkbox.
I got !newDeviceGroup.touched = true even though the checkbox is changing its value when I am clicking. Not sure why?
<form [formGroup]="newDeviceGroup" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col">
<label class="chk-container" for="isNewDevice"
><span class="chk-label">Device is work</span>
<input
type="checkbox"
id="isNewDevice"
name="isNewDevice"
class="isNewDevice"
[value]="isDeviceWork"
[checked]="isDeviceWork == true"
(change)="onCheckChange($event)"
/>
<span class="checkmark"></span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" id="btnSubmit" [disabled]="!newDeviceGroup.touched">
</form>
You need set the FormGroup as touched via AbstractControl.markAsTouched().
onCheckChange(event: any) {
this.newDeviceGroup.markAsTouched();
}