Angular：将复选框设置为 null 而不是 false

Question

我目前正在开发一个过滤系统，用户可以选择一些参数来过滤项目列表。

例如，项目列表可以是菜肴列表，而过滤器被排列为一组复选框，带有素食、素食、仅限鱼类等标签。（为了示例，这些被排列为复选框。我是知道这应该是一个下拉菜单）。

我希望每个复选框在未选中时返回 null 而不是 false。在我的后端，收到 false 是因为该字段应该是 -false- 而不是不使用该字段过滤它。然后如果有人检查，使用表单控件，它会将初始值设置为 null。

最初，它工作正常，但一旦用户选中并取消选中该复选框，该值就会更改回 false。我尝试将表单控件的类型更改为 但这似乎也不起作用。

Answer 1

我发现的一个解决方法是在表单控件上为特定复选框使用三元运算符，如下所示：

form.checkboxFormControl = form.checkboxFormControl ？ form.checkboxFormControl : null

这是在进入我的后端之前将 false 更改为 null。虽然这有效，但我正在寻找一种更直接的方法（可能在 HTML 中或在初始化表单控件时。

Answer 2

像这样SO，只需更改Y和N：

使用ReactiveForms

  <input type="checkBox" 
       [ngModel]="addTermForm.get('Status').value?true:false"
       (ngModelChange)="addTermForm.get('Status').setValue($event?true:null)"
       [ngModelOptions]="{standalone:true}"
       >

使用简单的模型

  <input type="checkBox" 
       [ngModel]="mivariable?true:false"
       (ngModelChange)="mivariable=$event?true:null"
       >