AngularJS - 检查“数字”类型的输入是否有值，0 是有效值答案

【问题标题】：AngularJS - Check if an input of type "number" has a value, 0 being a valid valueAngularJS - 检查“数字”类型的输入是否有值，0 是有效值
【发布时间】：2018-01-10 11:13:06
【问题描述】：

我正在努力让 AngularJS 与我正在尝试实现的一个小东西正常工作。

我有一个number 类型的输入（这可能会导致问题），它绑定到我的控制器中的一个变量，如果此输入为空，我需要禁用一个按钮。

这是我的输入和按钮的代码：

<input type="number" min="0" max="20" ng-model="student.mark">

<button ng-disabled="!student">Send</button>

如果该字段为空，我尝试了几种解决方案来禁用我的按钮，但如果它的值为0，则启用它：

<button ng-disabled="!student || !student.mark">Send</button>

<button ng-disabled="!student || !angular.isNumber(student.mark)">Send</button>

<button ng-disabled="!student || student.mark == ''">Send</button>

<button ng-disabled="!student || student.mark === ''">Send</button>

这些似乎都不起作用。如果我的输入中有任何数字，它将正常工作，但是如果我的值为“0”，则按钮将被禁用，或者如果我输入有效值然后将其删除，则按钮将保持启用状态。

让我认为它应该起作用的事实是，如果我使用 {{ student.mark }} 显示值，则值 0 确实会显示为“0”，而空输入将显示为空。

谢谢。

【问题讨论】：

也许你在幕后有更多的逻辑，但如果你只有ng-disabled="!student.mark"（也许你需要&&而不是||）
@AlekseySolovey 使用此解决方案，当字段的值为“0”时按钮被禁用，而应该启用它。
在输入上放一个必需的属性？
@Endless 是的，但它不会禁用我的按钮。
恕我直言，我认为禁用提交 btn 是一种不好的做法。对表单进行良好的约束验证会给表单带来严重错误，如果您无法单击提交 btn，则不会得到它们

标签： javascript angularjs

【解决方案1】：

注意：0 被视为假。

在你的控制器中定义

 $scope.student.mark = null;

使用条件

 ng-disabled="student.mark == null && student.mark < 0"

【讨论】：

【解决方案2】：

我建议您为此使用表单，例如：

<form name="formName" ng-submit="someMethod(student)" autocomplete="off" 
novalidate>

<input type="number" min="0" max="20"
    ng-model="student.mark" placeholder="e.g. 12"
    ng-required="true" /> 
<button type="submit" value="Send" ng-disabled="formName.$invalid || <something else here>" />
</form>

【讨论】：

我无法真正应用该解决方案，因为我在表格的每一行中都有一个表单（没有表单标签），如果我添加表单标签，这将使其无效 HTML。不是很好，但是是的......
bummer :/，在这种情况下，我通常更喜欢使用表单。也许下次它会帮助你:)

【解决方案3】：

我尝试了更多的东西，并实际测试值是否为null 成功了：

<button ng-disabled="!student || student.mark === null">Send</button>

【讨论】：