[英]how to make border red if date is invalid in angular js?
我有一個表格,其中有兩個字段DOB
和marriage
日期。如果結婚日期less than DOB
我想顯示red
邊框。如果DOB is greater than marriage
我可以得到,但我不能顯示紅色的邊框,以及我想要的形式應該是,如果我的領域是無效的無效 ,那么我的狀態也無效
這是我的代碼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']);
}
});
}
});
如果結婚日期大於我要顯示的紅色邊框,則我的表格應該無效
<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>
您可以使用: ng-class
就像是:
ng-class="{'verified': userForm[key].$invalid}"
您可以將其添加到輸入中。
然后將.verified
添加到您的CSS中:
input.form-control.verified {
border: 1px solid red;
}
這是plnkr
根據輸入字段的有效性進行應用非常簡單。 添加CSS規則,它將在字段變為無效時觸發。
inupt[uib-datepicker-popup].ng-invalid {
border: 1px solid red;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.