Angularjs получают форму поля поля внутри директивы

Я надеюсь, что это не дубликат - много похожих вопросов, но я не могу найти ответ, который работает.

У меня есть директива Angular, таким образом:

app.directive('emailInput', function(){
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        link: function(scope, elem, attrs, ctrl){
            elem.bind('keyup', function(){
                // TODO - what?
            })
        }
    }
}

и в шаблоне html:

<input type="email" required ng-model="emailAddress" />

Не зная имя формы, внутри функции link, я хочу знать значение свойства emailAddress.$valid - как я могу это получить?

Ответы

Ответ 1

Вам может потребоваться formController, который предоставит вам доступ ко всем входам, зарегистрированным в форме

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.emailAddress.$valid //check validity
          })
      }
  }
}

Помните, что Angular отслеживает входные элементы по имени. Поэтому вам нужно указать свой атрибут имени

<input type="email" required ng-model="emailAddress" name="emailAddress" />

Я бы также рекомендовал, возможно, просто передать все это с помощью атрибута директивы. Вероятно, вы не хотите жестко кодировать имена полей. Таким образом, вы можете просто иметь атрибут, который принимает значение

inputIsValid='formName.emailAddress.$valid'

И оцените (или $watch it) в вашей директиве.

Ответ 2

Мы можем проверить достоверность более легко, не зная названия элементов ввода.

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.$valid //check validity here
          })
      }
  }
}

Ответ 3

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

Вам просто нужно потребовать контроллер ngModel:

app.directive('emailInput', function(){
  return {
    require: 'ngModel'
    restrict: 'E',
    templateUrl: 'template.html',
    link: function(scope, elem, attrs, ngModelCtrl){
      elem.bind('keyup', function(){
          ngModelCtrl.$valid //check validity
      })
    }
  }
}

См. документ AngularJS для ngModel.NgModelController, $valid в разделе "Свойства":

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Ответ 4

Знай это старый поток, но если кто-то столкнется с этой проблемой, я решил это:

app.directive('emailInput', function(){
  return {
      restrict: 'E',
      templateUrl: 'template.html',
      controller:function($scope){
         $scope.isInvalid = function(){
            return $scope.myelem.data().$ngModelController.$invalid;
         }
      },
      link: function(scope, elem, attrs){
          $scope.myelem = $(elem).find("input");
      }
  }
}

Ответ 5

Вот директива, которая установит грязную истину, даже если ничего не было введено.

По умолчанию $dirty устанавливается, если что-то введено и не будет отображать требуемое сообщение об ошибке до тех пор, пока пользователь не отправит. С этим

function() {
    return function (scope, element, attrs) {
        $(element).blur(function () {
            scope.$apply(function() {
                var field = scope.$eval(attrs.makeDirty);
                field.$dirty = true;
            });
        });
    };

HTML:

<label class="fieldLabel" for="confirmEmail">Confirm Email*</label>
<input type="text" id="confirmEmail" name="confirmEmail" ng-model="confirmEmail" ng-pattern="{{Ctrl.Model.Email.EmailAddress}}" required make-dirty="form.confirmEmail">
<span class="error" ng-show="form.confirmEmail.$error.pattern && form.confirmEmail.$dirty">Emails must match</span>
<span class="error" ng-show="form.confirmEmail.$error.required && (form.$submitted || form.confirmEmail.$dirty)">Confirm your email</span>

Это позволяет мне давать обратную связь, когда пользователь заполняет или вносит вклад в форму.

Ответ 6

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

link: function (scope, element, attrs, formCtrl) {
    scope.fileSizeError=false;
    scope.$watch(function () {
               return formCtrl.fileP.$error.maxSize;
             },function(newValue) {
                scope.fileSizeError=newValue;
             });          
}

В моем случае я был внутри директивы, которая используется для загрузки файла, поэтому мне нужно было знать состояние var $error.maxSize в шаблоне, поэтому я сделал это.