[英]how to make border red if date is invalid in angular js?
I have a form in in which I have two field DOB
, and marriage
date .I want if marriage date is less than DOB
I want to show red
border .I am able to get if DOB is greater than marriage
But I am not able to show red border as well I want form should be invalid if my fields are invalid then my form is also invalid 我有一个表格,其中有两个字段
DOB
和marriage
日期。如果结婚日期less than DOB
我想显示red
边框。如果DOB is greater than marriage
我可以得到,但我不能显示红色的边框,以及我想要的形式应该是,如果我的领域是无效的无效 ,那么我的状态也无效
here is my code http://plnkr.co/edit/neixp9ZARRAQ33gKSV9u?p=preview 这是我的代码http://plnkr.co/edit/neixp9ZARRAQ33gKSV9u?p=preview
$scope.changedate =function(obj){
console.log(obj.name)
if(obj && obj.name){
obj.longDate = moment(obj.name).format('x');
}
if(parseInt($scope.c['marriage date'].longDate) > parseInt($scope.c['date of birth'].longDate)){
alert('not bigger')
}
}
app.directive('viewValueChanged', function viewValueChangedDirective() {
return {
restrict: "A",
require: 'ngModel',
link: linkFn
};
function linkFn(scope, elem, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$viewValue;
}, function (newValue, oldValue) {
if (newValue && newValue !== oldValue) {
scope.$parent.$eval(attrs['viewValueChanged']);
}
// in case of user entered invalid value
if(newValue === null) {
scope.$parent.$eval(attrs['viewValueChanged']);
}
});
}
});
if marriage date is bigger than I want to show red border as well .my form should be invalid 如果结婚日期大于我要显示的红色边框,则我的表格应该无效
<form name="userForm">
<li ng-repeat="(key, x) in c">
<p class="input-group" ng-if="x.date=='date'">{{key}}
<input name="{{key}}" type="text" view-value-changed='changedate(x)' class="form-control" uib-datepicker-popup="{{format}}" ng-model="x.name" is-open="x.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="formats" />
<span id="" ng-if="userForm[key].$invalid" class="help-block" style="margin-bottom:0">Invalid date </span>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1(x)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group" ng-if="x.date=='date2'">{{key}}
<input name="{{key}}"type="text" view-value-changed='changedate(x)' class="form-control" uib-datepicker-popup="{{format}}" ng-model="x.name" is-open="x.opened" datepicker-options="dateOptions2" ng-required="true" close-text="Close" alt-input-formats="formats" />
<span id="" ng-if="userForm[key].$invalid" class="help-block" style="margin-bottom:0">Invalid date </span>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1(x)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</li>
</form>
It would be very simple to apply based on the validity on input field. 根据输入字段的有效性进行应用非常简单。 Add CSS rule and it will trigger when field becomes invalid.
添加CSS规则,它将在字段变为无效时触发。
inupt[uib-datepicker-popup].ng-invalid {
border: 1px solid red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.