angularjs - 输入类型号上的 ng-dirty 类 / $valid 在输入文本时为真答案

【问题标题】：angularjs - ng-dirty class on input type number / $valid is true when entering textangularjs - 输入类型号上的 ng-dirty 类 / $valid 在输入文本时为真
【发布时间】：2013-12-11 18:02:34
【问题描述】：

我想要的是一个输入，只有数字，当您输入除数字以外的任何内容时，它有一个红色边框。

我做的是

<input ng-model="number" name="number" type="number" step="any" />

还有这个

.ng-dirty.ng-invalid {
  border: 1px solid red;
}

现在，如果您输入“blah blah”，它将是 $valid == false 但它不会有红色边框，因为输入“blah blah”不会更新模型，因此不会放入 ng-dirty 类到输入。我显然不希望输入立即变成红色边框，我该如何处理？

你可以在这里测试http://plnkr.co/edit/HWGKkzmxVx0GYIiRGyqX?p=preview

谢谢。

PS：我在 chrome 上，使用 1.1.5

// 编辑

当我删除 required 时，http://plnkr.co/edit/E763TRUnYr47xwGqJOkG?p=preview 显然是有效的

【问题讨论】：

标签： javascript validation angularjs

【解决方案1】：

嗯，你的意思可能是这样的，它可以完美地工作：

.ng-dirty.ng-invalid {
    border: 1px solid red;
}

如documentation 所示，dirty 状态不会在模型更改时设置，而是在用户与表单交互时设置，因此可能是在视图更改时设置。

编辑：

根据您的 plunker，您的错误是将 no-validate 属性放在 <input> 标记上，而不是放在 <form> 标记上。见the corrected plunker。

【讨论】：

好吧，在Firefox上，开头没有边框，当键入非数字时会出现。那是你要的吗？你用的是哪个浏览器？
数字验证存在错误。我已经将它发布在谷歌群组页面上，但没有得到回复。如果您在数字字段中输入字母，它将验证该字段为真。
去掉需要的标签，输入类型号内的一切都是有效的。用 IE 和 Chrome 测试，所以让我们希望 angular-team 更新

【解决方案2】：

你有一个错字：

.ng-dirty.ng-invalid {
  border: 1px solid red;
}

【讨论】：

是的，谢谢，但这不是问题，只是在我创建帖子时犯了那个错字，在我的实际代码中它是 .ng-dirty.ng-invalid..
所以你希望它只在值不为空、无效和脏的情况下显示边框？
没错，但除非你在里面输入一个数字，否则不会添加 .ng-dirty，所以输入“shizzle”不会使边框变红，如果我只使用 .ng-invalid，它会工作，但输入会立即变成红色边框，这是我不想要的

【解决方案3】：

这是浏览器“错误”（实际上是预期行为）请参阅https://github.com/angular/angular.js/issues/2144 有一些解决方法，例如 https://groups.google.com/forum/#!topic/angular/pRc5pu3bWQ0/discussion

或者您可以使用相同的原则编写自己的输入指令

app.directive('input', [function() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, el, attrs, ctrl) {
            if (attrs.type == 'number' && typeof el.prop('validity') !== 'undefined') {
                el.on('keyup change', function() {
                    var validity = el.prop('validity');
                    ctrl.$setValidity('badInput', !validity.badInput);                      
                });
            }
        }
    };
}]);

【讨论】：