как сделать границу красной, если дата недействительна в угловых js? - PullRequest
Новая
       31

как сделать границу красной, если дата недействительна в угловых js?

0 голосов
/ 09 ноября 2018

У меня есть форма, в которой у меня есть два поля 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>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Было бы очень просто применить на основе достоверности в поле ввода. Добавьте правило CSS, и оно сработает, когда поле станет недействительным. 

inupt[uib-datepicker-popup].ng-invalid {
   border: 1px solid red;
}
0 голосов
/ 09 ноября 2018

Вы можете использовать: ng-class

Что-то вроде: 

 ng-class="{'verified': userForm[key].$invalid}"

Вы можете добавить его в свой ввод.

Затем добавьте .verified к вашему css: 

input.form-control.verified {
   border: 1px solid red;
}

Это плнкр

...