I think i have a wrong pattern of AngularJS email or what?

Question

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.

Hmm... You should probably ***trim*** the value before checking if it's a valid email. — Roko C. Buljan, Aug 03 '15 at 06:04
Or leave it as it is, let the user put spaces in front or at the end. I think it's a quite good UX. Than at server side trim the value and remove blanks from the beginning and from the end of string. — Roko C. Buljan, Aug 03 '15 at 06:08
@Roko C, do you mean _ng-trim_? is there _ng-trim_ in angularjs? — Juna serbaserbi, Aug 03 '15 at 06:08
Yes. https://docs.angularjs.org/api/ng/input/input%5Btext%5D — Roko C. Buljan, Aug 03 '15 at 06:10
You can try but I don't think it'll do what you expect... Do as I've said. The email is valid in any case - even if the string isn't. Trim the value on server side before storing it or whatever you do with it. — Roko C. Buljan, Aug 03 '15 at 06:13
@RokoC.Buljan, i had put **ng-trim="true"**, but doesn't work either, ok maybe i will use trim in php after submit. tq. — Juna serbaserbi, Aug 03 '15 at 06:25
It's trimmed by default - unless you put `ng-trim="false"`. See the answer below. In any case - I'd use also a server side validation. — Roko C. Buljan, Aug 03 '15 at 06:25
ok @RokoC.Buljan, i had tried in my programme and the result is there's no space in front of the string, your answer is correct, and the answer of DTing is correct also. thanks — Juna serbaserbi, Aug 03 '15 at 07:38

dting · Accepted Answer · 2015-08-03T06:39:41.327

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:

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

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

Thank you @DTing for your explain answer, i had tried in my programme and the result is there's no space in front of the string, your answer is correct. thanks again. — Juna serbaserbi, Aug 03 '15 at 07:39
DTing, please help me again in [here](http://stackoverflow.com/questions/33669459/confusing-about-this-cookies-in-redirecting-system) — Juna serbaserbi, Nov 12 '15 at 12:43

I think i have a wrong pattern of AngularJS email or what?

1 Answers1