Неправильные ошибки проверки формы 1

Question

У меня есть проверка формы, и я не могу показать свое сообщение об ошибке проверки.

<div class="col-sm-8">
   <input name="email" class="form-control" type="text" ng-model="formdata.email" email-valid required>
   <div class="ng-cloak" ng-show="registration_form.email.$touched">
      <p class="field_error" ng-show="registration_form.email.$error.required">Email is required</p>
      <p class="field_error" ng-show="registration_form.email.$error.emailValid">Email is invalid</p>
      <p class="field_error" ng-show="registration_form.email.$error.minlength">Email is too short</p>
   </div>
</div>

Часть моего контроллера:

var email = Validators.validateEmail(data.email);
if (email != true) {
    $scope.registration_form.email.$error.emailValid = true;
}

Любая помощь будет оценена.

Answer 1

Вам необходимо использовать пользовательский валидатор . Например, ниже, электронная почта будет действительна, только если она имеет длину более 13 (5+ символов до @) и заканчивается на .com или .net . В функции emailValid вы можете проверить все, что захотите.

var app = angular.module('FormExample', []);

var EMAIL_REGEXP = /^[a-z0-9](\.?[a-z0-9]){3,}@mail\.(com|ru)$/;
app.directive('customEmail', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$validators.emailValid = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (EMAIL_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="FormExample">
  <div>
    <form novalidate name="registration_form">
      <label>Email:
                    <input custom-email name="email" type="text" ng-model="email" minlength=14 required>
                </label>
      <div class="ng-cloak" ng-show="registration_form.$submitted || registration_form.email.$touched">
        <p ng-show="registration_form.email.$error.required">Email is required</p>
        <p ng-show="registration_form.email.$error.emailValid">Email is invalid</p>
        <p ng-show="registration_form.email.$error.minlength">Email is too short</p>
      </div>
      <br>
      <input type="submit" value="Save">
    </form>
  </div>
</div>