1

What I want is an input, number only, which have a red border when you type anything but a number to it.

What I did is 

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

and this

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

now if you type in "blah blah", it's gonna be $valid == false BUT it's not gonna have a red border, because typing in "blah blah" won't update the model thus won't put ng-dirty class to the input. I obviously don't want the input to be red bordered right away, how do I deal with this?

You can test it here http://plnkr.co/edit/HWGKkzmxVx0GYIiRGyqX?p=preview

Thanks.

PS: I'm on chrome, using 1.1.5

// edit

when I remove the required it's even gonna be valid http://plnkr.co/edit/E763TRUnYr47xwGqJOkG?p=preview apparently

4

3 回答 3

1

好吧，您可能的意思是这样的，它可以完美地工作：

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

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

编辑：

根据您的 plunker，您的错误是将no-validate属性放在<input>标签上，而不是放在<form>标签上。请参阅更正后的 plunker。

于 2013-06-24T19:12:24.660 回答
0

你有一个错字：

.ng-dirty.ng-invalid {
  border: 1px solid red;
}
于 2013-06-24T19:11:44.480 回答
0

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

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

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);                      
                });
            }
        }
    };
}]);
于 2013-12-11T10:02:34.553 回答