scope. $ eval () не определен, если оба поля ввода имеют одинаковую директиву - PullRequest
Новая
       8

scope. $ eval () не определен, если оба поля ввода имеют одинаковую директиву

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

Я пытаюсь проверить два поля ввода пароля.Просто подтвердите, что они равны.( Предложите другой подход, если у меня неправильный подход )

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

Проблема в том, что когда у меня есть директива для обоих полей ввода, я не могу прочитать их значения модели через атрибут (чтобы проверить, совпадают ли они).

Вот рабочая демонстрация бездиректива о первом пароле: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

});
app.directive('myDir', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$validators.mismatch = function(modelValue, viewValue) {
        // MAIN CODE:
        return viewValue === scope.$eval(attrs.confirm);
      };

      ctrl.$validators.short = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          return true;
        }
        if (modelValue.length >= 3) {
          return true;
        }
        return false;
      }
    }
  };
});




  
    

    

    {{form1.password2.$error | json}}
Пароли разные

Если я изменю первое поданное на: 

<input type="password" my-dir confirm="pass2" name="password1" ng-model="pass1">

для проверки вв обоих направлениях scope.$eval(attrs.confirm) становится undefined для обоих полей.

Вот демонстрация моей проблемы: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

});
app.directive('myDir', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$validators.mismatch = function(modelValue, viewValue) {
        // `scope.$eval(attrs.confirm)` always undefined
        return viewValue === scope.$eval(attrs.confirm);
      };

      ctrl.$validators.short = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          return true;
        }
        if (modelValue.length >= 3) {
          return true;
        }
        return false;
      }
    }
  };
});




  
    

    

    {{form1.password2.$error | json}}
Пароли разные

1 Ответ

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

Вам нужно сделать 2 вещи: 1. Добавить ng-model-options="{allowInvalid: true}", чтобы неверное значение все равно обновляло значение области.2. Теперь у вас есть проблема, например, изменение 2-го входа не приведет к 1-й повторной проверке.Это делается с использованием наблюдений: 

  <body ng-controller="MainCtrl" ng-init="x = 0; y = 0">
    <form name="form1">
    <input type="password" my-dir="{{y}}" confirm="pass2" name="password1" ng-model="pass1" ng-model-options="{allowInvalid: true}"
       ng-change="x = x + 1"><br>
    <input type="password" my-dir="{{x}}" confirm="pass1" name="password2" ng-model="pass2" ng-model-options="{allowInvalid: true}"
       ng-change="y = y + 1"><br>

и 

attrs.$observe('myDir', function() {
    ctrl.$validate();
});

http://plnkr.co/edit/ws4tVWGXfFNR2yqLRJN7?p=preview

PS для обычных полей, я бы написал my-dir = "{{pass1}} "и тогда нет необходимости в $ eval и ng-change, но для паролей ... не уверен

...