没有ngmodel的角度复选框？用什么代替？答案

【问题标题】：Checkbox in angular without ngmodel? what to replace with?没有ngmodel的角度复选框？用什么代替？
【发布时间】：2021-07-23 00:44:34
【问题描述】：

我有一个需要增强的复选框，之前它处理了对后端的调用，但现在不再需要它，并且只需要一个复选框，如果选中则关闭其他复选框：

    <label class="custom-control custom-checkbox" style="display: block">
      <input type="checkbox" class="custom-control-input" id="myCheckbox" name="myCheckbox"
             [(ngModel)]="checkboxPolicy" (ngModelChange)="parentcheckbox($event,child1,child2,child3)">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">
        <span id="checkboxstart">
        </span>
      </span>
    </label>

我需要完全删除 ngModel，但输入需要它，我是否可以拥有一个纯粹出于 UI 目的而存在的无数据复选框。不控制任何数据，只控制 ngModelChange 方法中的其他框。

【问题讨论】：

标签： angular typescript checkbox angular-ngmodel

【解决方案1】：

您可以在您的代码中删除 [(ngModel)] 并将 (ngModelChange) 替换为 (change) 并且它会起作用。无论 checkboxPolicy 实现了什么，都可以通过 parentcheckBox 函数中的 $event 来处理。下面的代码应该可以按要求工作。

<label class="custom-control custom-checkbox" style="display: block">
      <input type="checkbox" class="custom-control-input" id="myCheckbox" name="myCheckbox"
              (change)="parentcheckbox($event,child1,child2,child3)">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">
        <span id="checkboxstart">
        </span>
      </span>
    </label>

  parentcheckbox(val, x, y, z) {
    const isChecked = val.currentTarget.checked;
    if (isChecked) {
      // disable the checkboxes
    } else {
      // enable the checkboxes
    }
  }

【讨论】：