重现问题
- 在 Firefox 中打开 plunker
- 输入“oEfeowjewfj”
您会看到 myForm.input.$valid 为 false，这就是预期的结果。 之后我们继续:
现在您看到值已更改，但 myForm.input.$valid 仍然为 false
问题
如何通过表单中的代码设置时间并使 myForm.input.$valid 为 true？
http://plnkr.co/edit/a4wz3bE36EbbQvftZoL5?p=preview
<body ng-app="timeExample">
<script>
angular.module('timeExample', [])
.controller('DateController', ['$scope', '$timeout', function($scope, $timeout) {
$scope.example = {
value: '14:00'
};
$scope.setValue = function() {
$scope.example.value = "15:00"
}
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
Pick a between 8am and 5pm:
<input type="time" id="exampleInput" name="input" ng-model="example.value"
placeholder="HH:mm" min="08:00:00" max="17:00:00" required />
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.time">
Not a valid date!</span>
<tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<button data-ng-click="setValue()">SetValue</button>
</form>
</body>
最佳答案
我建议您使用 Angular API 文档:https://docs.angularjs.org/api/ng/input/input%5Btime%5D
您需要更改 setValue 函数:
$scope.setValue = function() {
$scope.example.value = new Date(2014, 1, 3, 14, 57, 0);
}您必须将 ng-model 设置为有效的 javascript 日期对象。
关于angularjs - 更改范围变量中的值后， Angular 表单验证无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28810610/