Директива-валидатор не поймает пустое поле, но заполнено поле

Question

У меня есть следующий код AngularJS. Он должен проверить, пустое поле ввода, когда я нажимаю кнопку «Отправить». Кнопка Submit передает широковещательные сообщения, которые успешно выхватывает директива. Но это не работает, когда поле пусто. Он достигает ctrl. $ Parsers.unshift, когда я начинаю вводить текст, и мое поле становится theForm.name. $ Invalid === true. Кажется, это работает наоборот.

define(['angular'], function (angular) { 
    "use strict"; 

    var requiredValidator = angular.module('RequiredValidator', []); 
    requiredValidator.directive('validateRequired', function() { 
    var KEY_ERROR = "required"; 

    return { 
     scope: { 
     validateRequired: '=validateRequired' 
     }, 
     require: 'ngModel', 
     link: function (scope, elem, attr, ctrl) { 

     function validate(value) { 
      var valid = !value || value === '' || value === null; 
      ctrl.$setValidity(KEY_ERROR, valid); 
      return value; 
     } 

     scope.$on('validateEvent', function (event, data) { 
      if (scope.validateRequired.$submitted) { 
      console.log("Reachable block when submitted"); 
      ctrl.$parsers.unshift(function (value) { 
       console.log("Unreachable when input is empty"); 
       return validate(value); 
      }); 

      ctrl.$formatters.unshift(function (value) { 
       return validate(value); 
      }); 
      } 
     }); 

     } 
    }; 
    }); 
    return requiredValidator; 
}); 

Форма поля сниппет:

<div> 
    <input type="text" name="name" 
    data-ng-class="{ error : theForm.name.$invalid}" 
    data-ng-model="customer.name" 
    data-validate-required="theForm"> 
    <span data-ng-show="theForm.name.$invalid" class="error">{{getInputErrorMessage(theForm.name.$error)}}</span> 
</div> 

Answer 1

Вы на самом деле не нужна такая сложная директива для вашего Szenario. Можно также обрабатывать логику в контроллере так:

var app = angular.module('form-example', ['ngMessages']); 
 

 
app.controller('FormCtrl', function($scope) { 
 
    var vm = this; 
 

 
    vm.submit = function(form) { 
 
    if (form.$invalid) { 
 
     angular.forEach(form.$error.required, function(item) { 
 
     item.$dirty = true; 
 
     }); 
 
     form.$submitted = false; 
 
    } else { 
 
     alert('Form submitted!'); 
 
    } 
 
    }; 
 
});

label, 
 
button { 
 
    display: block; 
 
} 
 
input { 
 
    margin: 5px 0; 
 
} 
 
button { 
 
    margin-top: 10px; 
 
} 
 
form { 
 
    margin: 10px; 
 
} 
 
div[ng-message] { 
 
    margin-bottom: 10px; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-messages.js"></script> 
 

 
<form ng-app="form-example" name="myForm" ng-controller="FormCtrl as vm" novalidate="" ng-submit="vm.submit(myForm)"> 
 
    <label for="username">Username</label> 
 
    <input id="username" type="text" name="username" ng-model="vm.username" required="" /> 
 
    <div ng-messages="myForm.username.$error" ng-if="myForm.username.$dirty" role="alert"> 
 
    <div ng-message="required">Username is required</div> 
 
    </div> 
 
    <label for="email">E-Mail</label> 
 
    <input id="email" type="email" name="email" ng-model="vm.email" required="" /> 
 
    <div ng-messages="myForm.email.$error" ng-if="myForm.email.$dirty" role="alert"> 
 
    <div ng-message="required">E-Mail is required</div> 
 
    <div ng-message="email">Your E-Mail is not valid</div> 
 
    </div> 
 
    <button type="submit">Send</button> 
 
</form>

Для этого необходимо использовать по крайней мере AngularJS версии 1.3.0, так как я использую $submitted свойство внутреннего FormController. Для получения дополнительной информации проверьте documentation на FormController. Я также использую ngMessages, который также был представлен в 1.3. Это очень полезно, если вы хотите отображать сообщения в формах относительно ошибок.