Angular FormGroup touched 不适用于复选框

Question

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>

Answer 1

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

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

Sample Demo on StackBlitz

Angular FormGroup touched 不适用于复选框

Angular FormGroup touched not working for checkbox

html

javascript

typescript

angular

angular-reactive-forms