Angular FormGroup touched not working for checkbox

Issue

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>

Solution

You need set the FormGroup as touched via AbstractControl.markAsTouched().

onCheckChange(event: any) {
  this.newDeviceGroup.markAsTouched();
}

Sample Demo on StackBlitz

Answered By - Yong Shun