angularjs - 是否存在 ng-model 和输入类型电子邮件错误？

Question

input type="email" 和 ng-model 属性有什么特别之处吗？如果输入是电子邮件，则模型不会更新。如果我将输入类型更改为文本、数字或日期，它会正确更新。

错误或一些我不理解的特殊神奇电子邮件验证行为？

Answer 1

它会在输入时进行一些验证，因此您需要在将其绑定到模型之前输入有效的电子邮件地址。

这是使用的正则表达式：

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

基本上你需要输入一个至少是a@b.co

Answer 2

这不是错误，它只会在我们输入正确的电子邮件地址格式以进行电子邮件验证时更新。添加此属性ng-model-options="{'allowInvalid': true}"以允许无效的电子邮件输入。

Answer 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

参考

Answer 4

从 Angular 1.3 开始，您可以轻松地覆盖“电子邮件”验证器并使其始终返回 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>

享受。