Angular FormGroup 触摸不适用于复选框答案

【问题标题】：Angular FormGroup touched not working for checkboxAngular FormGroup 触摸不适用于复选框
【发布时间】：2022-01-20 01:10:05
【问题描述】：

用于检查表单的 Angular 表单被触摸，无法与复选框一起使用。我得到了!newDeviceGroup.touched = true，即使我点击复选框时它的值正在改变。不知道为什么？

<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>

【问题讨论】：

标签： javascript html angular typescript angular-reactive-forms

【解决方案1】：

您需要将FormGroup 设置为通过AbstractControl.markAsTouched() 触摸。

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

Sample Demo on StackBlitz

【讨论】：