Передача модели в пользовательскую угловую директиву для проверки

Question

Передача модели в пользовательскую угловую директиву для проверки

0

Я создал небольшую директиву angularjs для ошибки проверки смещения на моей странице

Вот код

.directive('validationErrors', function() {
        return {
            templateUrl: '/Content/biz/templates/common/validation-errors.html',
            replace: true,
            restrict: 'E',
            scope: {
                modelToValidate: '=',
                modelMinLength: '=',
                modelMaxLength: '=',
                modelPattern: '='
            }
        }
    });

И шаблон для него

<div class="col-sm-5 pull-right" data-ng-show="modelToValidate.$dirty && modelToValidate.$invalid">
<span class="label label-warning" data-ng-show="modelToValidate.$error.required">This field is required!</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.minlength">Minimum field length should be  {{modelMinLength}}</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.maxlength">Maximum field length should be  {{modelMaxLength}}</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.pattern">Model should have {{modelPattern}}</span>

Чем я привяжу его к модели

 <div class="col-sm-4">
                            <input class="form-control" ng-model="data.Main.FullName" ng-maxlength="1000" required/>

Это создает разметку, подобную

<div class="col-sm-4">
                            <input class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-model="data.Main.FullName" ng-maxlength="1000" required="">
                            <div class="col-sm-5 pull-right ng-isolate-scope" model-to-validate="data.Main.FullName" model-max-length="1000">
<span class="label label-warning ng-hide" data-ng-show="modelToValidate.$error.required">This field is required!</span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.minlength">Minimum field length should be </span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.maxlength">Maximum field length should be 1000</span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.pattern">Model should have </span>

Но если привязанная модель имеет ошибку, ничего не отображается. Пожалуйста, помогите мне понять, почему это так.

Anton 22 июль 2015, в 06:39

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Chandermani · Accepted Answer · 2015-07-22T02-22-00.000Z

Я думаю, что вам нужно передать вам форму - ngModelController экземпляр aa ngModelController, тогда как то, что вы передаете, является экземпляром модели.

Сначала измените ввод, чтобы иметь атрибут имени

<input name="fullName" class="form-control" ng-model="data.Main.FullName" ng-maxlength="1000" required/> (Также убедитесь, что ваша форма имеет атрибут имени, допустим, что это myForm)

И тогда параметр директивы должен быть

<div model-to-validate="myForm.FullName" model-max-length="1000">

Теперь это должно работать. Помните, что все свойства, которые вы используете, например $error, определены в экземпляре NgModelController, а не на модели.

Также, что вы делаете, можно сделать в Angular 1.4, используя ngMessage