如何限制用户在表单中只输入布尔值？答案

【问题标题】：How to restrict user to input only boolean in the Form?如何限制用户在表单中只输入布尔值？
【发布时间】：2021-12-27 22:31:18
【问题描述】：

是否有适当的方法限制用户仅输入 true 或 false ？我看到我们可以只允许用户输入数字，但我们如何处理布尔值？

我试过了

<input
            type="boolean"
            [(ngModel)]="item.isApproved"
            class="form-control"
          />

但这允许用户输入任何字母或数字，尽管我已将类型定义为布尔值。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

您可以使用<input type="checkbox" /> 创建一个基本上只接受布尔输入的checkbox input：

<label>
  <input type="checkbox" />
  <span>A checkbox is either on or off - true or false</span>
</label>

【讨论】：

【解决方案2】：

你可以使用：

<input
                type="checkbox"
                [(ngModel)]="item.isApproved"
                class="form-control"
              />

如果你想让复选框尺寸更大，你可以自定义 scss 为：

input[type="checkbox"] {
  -ms-transform: scale(3);
  -moz-transform: scale(3);
  -webkit-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3);
  padding: 40px;
  box-shadow: 2em #3b88fd;
}

【讨论】：