Есть ли ошибка электронной почты ng-модели и ввода типа?

Есть ли что-то особенное с типом ввода = "email" и атрибутом ng-model? Если входной адрес электронной почты, то модель не обновляется. Если я меняю тип ввода на текст, номер или дату, он правильно обновляется.

Ошибка или какое-то специальное волшебное поведение проверки электронной почты, которое я не понимаю?

Ответ 1

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

Это регулярное выражение, которое используется:

/^[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/

В принципе вам нужно ввести адрес, который не менее [email protected]

Ответ 2

Это не ошибка, она обновляется только после ввода правильного формата адреса электронной почты для проверки электронной почты. Добавьте этот атрибут ng-model-options="{'allowInvalid': true}", чтобы разрешить недействительный ввод электронной почты.

Ответ 3

Дополнение, вы можете использовать свойства в своей форме, чтобы узнать, действительно ли ваше письмо, например:

HTML

<form name="myForm" ng-submit="submit()">
    <input type="email" ng-model="email1" name="email1" />
</form>

Javascript

//[formName].[inputFieldName].property 
myForm.email1.$pristine;
// Boolean. True if the user has not yet modified the form.
myForm.email1.$dirty
// Boolean. True if the user has already modified the form.
myForm.email1.$valid
// Boolean.True if the the form passes the validation.
myForm.email1.$invalid
// Boolean. True if the the form doesn't pass the validation.
myForm.email1.$error

Ссылка

Ответ 4

Начиная с Angular 1.3, вы можете легко перезаписать валидатор "email" и заставить его всегда возвращать true.

angular
  .module('myApp', [])
  .controller('MainController', function() {
    this.email = '';
  })
  .directive('noEmailValidation', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elm, attr, ctrl) {
        ctrl.$validators['email'] = function() {
          return true;
        };
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="myApp">
  <form ng-controller="MainController as main">
    <div>Email: {{main.email}}</div>
    <input type="email" ng-model="main.email" no-email-validation>
  </form>
</div>