我想我有错误的AngularJS邮件模式或者什么?

this is my video

这是我的视频

i put some spaces in front the @ mark but the submit button doesn't disappear, why? That is still a wrong mistake value and i want the submit button disapear.

我在@标记前面加了一些空格，但是提交按钮没有消失，为什么?这仍然是一个错误的错误值，我希望提交按钮停止。

my code is like this

我的代码是这样的

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
    <form name='myForm' ng-controller='formctrl'>
        <input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
        <span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
        <input type='submit' value='submit' ng-hide="!myForm.$valid"></input>
    </form>
    <script>
        var app = angular.module('ctrljs', []);
        app.controller('formctrl', function($scope, $http){
          $scope.digits = {};
        });
    </script>
</body>
</html>

help me please, thank you.

请帮帮我，谢谢。

1 个解决方案

#1

The email is valid because angular will trim that whitespace for you. See the example below. If you type a space before example. You will see it become valid.

电子邮件是有效的，因为角将修剪空白为你。看下面的例子。如果在示例之前输入空格。你会看到它变得有效。

var app = angular.module('ctrljs', []);
app.controller('formctrl', function($scope, $http) {
  $scope.email = "   example@example.com";
});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>

<body ng-app="ctrljs">
  <form name='myForm' ng-controller='formctrl'>
    <pre>{{email}}</pre>
    <input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
    <span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
    <input type='submit' value='submit' ng-hide="!myForm.$valid">
  </form>
</body>

Unfortunately there is no ng-trim for type="email" see the docs here:

不幸的是，没有ng-trim类型=“电子邮件”请参阅这里的文档:

https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

If you want to prevent the auto trimming from happening you have to monkey patch.

如果你想防止自动修边的发生，你必须安装一个防猴补丁。

Also from the doc, the type=email input already has a built in validation using the regex in this file: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js

同样，在doc中，type=email输入已经使用这个文件中的regex进行了内置的验证:https://github.com/angular/angular/angular.js/blob/master/src/ng/directive/input.js

You don't need to provide your own unless you need stricter or looser validation.

你不需要提供你自己的，除非你需要更严格或更宽松的验证。

#1