AngularJS验证更新另一个输入字段的错误状态
angularjs validation update error status of another input field
Aloha.我有两个时间输入字段,开始+结束。我创建了自定义验证来检查字段是否为空、有效时间以及开始时间是否在结束时间之前。除以下情况外有效:
- 将两次编辑分别为 7:45 和 7:50,没有错误;
- 将结束时间编辑为在开始时间之前,从 7:50 到 7:44,验证完成其工作,即 $error.validAfter = true; 忽略结束时间
- 字段并将开始时间编辑为结束时间之后,从 7:45 到 7:47,($error.validBefore error = true(;
- 将开始时间编辑为结束时间之前,从 7:47 到 7:43 - $error.validBefore = false;
此时,$error.validAfter 对于末世仍然适用。 在确认开始时间(第四个项目符号(的验证后,有没有办法更新它?
.HTML:
<div data-ng-app="scheduleApp">
<h2>{{ "Schedule App" }}</h2>
<div class="time" data-ng-form="formtime">
<div class="form-row">
<span class="label">Start time:</span>
<span class="field">
<input type="text" name="startTime" ng-model="startTime" is-from placeholder="e.g. 7:50" required validatetime="{{ endTime }}" />
<span class="error" ng-class="{required: formtime.startTime.$error.required, invalid: formtime.startTime.$error.validTime}">enter a valid time, <i>hh:mm</i></span>
<span class="error" ng-show="formtime.startTime.$error.validBefore" ng-class="{invalid: formtime.startTime.$error.validBefore && !formtime.startTime.$error.validTime}">start time must be before the end time</span>
</span>
<span>{{ formtime.startTime.$error }}</span>
</div>
<div class="form-row">
<span class="label">End time:</span>
<span class="field">
<input type="text" name="endTime" ng-model="endTime" placeholder="e.g. 7:55" required validatetime="{{ startTime }}" />
<span class="error" ng-class="{required: formtime.endTime.$error.required, invalid: formtime.endTime.$error.validTime}">enter a valid time, <i>hh:mm</i></span>
<span class="error" ng-show="formtime.endTime.$error.validAfter" ng-class="{invalid: formtime.endTime.$error.validAfter && !formtime.endTime.$error.validTime}">end time must be after the start time</span>
</span>
<span>{{ formtime.endTime.$error }}</span>
</div>
</div>
Javascript:
var app = angular.module("scheduleApp", []);
function PMhour(hour) {
var pmHours = [1,2,3,4,5,6];
return pmHours.indexOf(hour) >= 0 ? (hour + 12) : hour;
}
app.directive("validatetime", function() {
return {
restrict: "A"
, require: "ngModel"
, link:
function($scope, elem, attrs, ctrl) {
var validTime = false;
var validCompare = false;
var isFrom = attrs.isFrom == null ? false : true;
var otherTime;
attrs.$observe("validatetime", function(otherTimeVal) {
otherTime = otherTimeVal;
});
ctrl.$parsers.unshift (isValidTime, isValidTimeCompare);
ctrl.$formatters.unshift(isValidTime, isValidTimeCompare);
function isValidTime(value) {
var regex = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/i;
validTime = false;
if (value != null) {
if (value.length) {
validTime = regex.test(value);
}
}
ctrl.$setValidity('validTime', validTime);
if (validTime) {
return value;
}
}
function isValidTimeCompare(value) {
var tmpFrom;
var tmpTo;
if (otherTime) {
validCompare = (otherTime.length == 0);
}
else {
validCompare = true;
}
if (validTime) {
if (otherTime.length) {
if (isFrom) {
tmpTo = new Date(2000, 0, 1, PMhour(parseInt(otherTime.split(":")[0])), parseInt(otherTime.split(":")[1]));
tmpFrom = new Date(2000, 0, 1, PMhour(parseInt(value.split(":")[0])) , parseInt(value.split(":")[1]));
}
else {
tmpFrom = new Date(2000, 0, 1, PMhour(parseInt(otherTime.split(":")[0])), parseInt(otherTime.split(":")[1]));
tmpTo = new Date(2000, 0, 1, PMhour(parseInt(value.split(":")[0])) , parseInt(value.split(":")[1]));
}
validCompare = (tmpFrom < tmpTo);
}
}
if (isFrom) {
ctrl.$setValidity("validBefore", validCompare); // from is before the other time
}
else {
ctrl.$setValidity("validAfter", validCompare); // to is after the other time
}
return value;
};
}
}
});
在这里普伦克: http://plnkr.co/edit/Innbv6lCYewefSgKhvGA?p=info
对不起,我是 plunker 概念的新手。如果您看不到代码,请告诉我。谢谢您的帮助。
我认为你只是把事情复杂化了。只需跟踪一个变量,isValid
,每次值更改时都会更新该变量。只需像您正在做的那样将开始和结束进行比较为日期,您应该是金色的。
只是一个注释 - 您的代码看起来非常复杂 - 您可能只需要在每个时间字段上$watch
,其中您使用两个字段值执行checkValidity()
函数。如果这没有意义,请告诉我。
相关文章:
- AJAX错误状态代码500内部服务器错误
- 处理角度.js承诺错误状态
- 如何在php中添加按钮而不是错误状态和成功消息
- 尽管成功传输了 json,但我的 Jquery.ajax 方法在响应中获得了错误状态
- Backbone.sync 获取所有响应错误状态代码
- AngularJS:如何获取$http的错误状态
- "回滚”;Ember模板中的错误状态
- Javascript:Phoenix频道立即进入错误状态
- Ember.js - Pod结构中的错误状态
- 根据用户选择/选项可用性切换选择框错误状态
- AngularJS验证更新另一个输入字段的错误状态
- 如果JSON中的键值为空,则发送错误状态(AJAX、Node和Express)
- ajax错误状态0与空错误在GETcalls
- Websocket错误:Websocket握手过程中出现错误:状态行中没有找到响应代码
- 如何获取NodeJS的错误状态码
- XMLHttpRequest总是调用";负载";事件侦听器,即使响应具有错误状态
- ui路由器解析功能中的处理错误?(又名$stateChangeError)将数据传递到错误状态
- 哪个 Http 错误/状态代码是合适的
- 错误状态:使用angular js和codeigniter 2.2
- 如何显示错误的密码在Firebase简单登录电子邮件密码的错误状态