AngularJS show email field error on submit?

Question

I have a form in Angular JS 1.5.11.

I have it set up to show an error message for empty required fields on form submit. I need to add the ability to also detect if an email is valid on submit.

So far, I can't get this to work. I tried using the "built-in" email field validation, the tried an ng-pattern. Still, no matter what you type in the field, it shows no error. Only the empty field show an error.

<div class="row">
 <div class="col-md-12">
   <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern  }">
  <label>Email</label>
  <input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
  <p class="help-block error-block">Enter a valid email address.</p>
  </div>
 </div>
</div>

See the whole form at https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview

Update

To clarify, I am using novalidate because I don't want to use the HTML5 built-in error message. If I remove that, I get

instead of

From the plunkr, I just removed the attribute novalidate from form and it worked for me. — Muhammed Neswine, Mar 20 '17 at 17:11
I do not _want_ to use the built in error display, I want to use my own (the Bootstrap one) — Steve, Mar 20 '17 at 17:16
https://plnkr.co/edit/9Na91wRtFhBnMNU6rc4O?p=preview Working sample — Saurabh Sarathe, Mar 20 '17 at 17:20
Yes, but that does it on _touched_. Your plunker removed the _submitted_ test. — Steve, Mar 20 '17 at 17:23

score 2 · Answer 1 · answered Mar 20 '17 at 17:27

2

First of all, sorry for misinterpreting the question. For getting the state of any input feild inside a form, You could use $valid state for that. Like for your form, you could call like {{abc.myForm.email.$valid}} inside your form and this would return true or false.

answered Mar 20 '17 at 17:27

Muhammed Neswine

2,028
1
20
20

That's the Angular way, and thats what the OP should use !! +1 – DevMoutarde Mar 20 '17 at 17:31
Thanks. The reason I posted, originally, was that `abc.myForm.email.$valid` combined with `abc.myForm.$submitted && abc.myForm.email.$error.required` I wasn't getting an invalid response. So now I used an `ng-pattern` with `abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern)` which is also (I assume) the "Angular way", but a different one. – Steve Mar 20 '17 at 17:43
1

@Steve ok ! good then, yeah I was wondering how come you couldn't achieve what you wanted because I personally use that kind of thing for validation too and I have both required and valid params to work ! – DevMoutarde Mar 20 '17 at 18:07
It could be I did not hit the magic combination of `&&` and `||` and nesting in `()`. That always drives me nuts. – Steve Mar 20 '17 at 18:36

Pramod Patil · Accepted Answer · 2017-03-20T17:20:53.950

See, type email is HTML5 property and if you put no validate in form, default validation of HTML5 will not work. Remove novalidate from form and use it.

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as abc">
  <p>Hello {{abc.name}}!</p>
  <form name="abc.myForm" ng-submit="abc.save(abc.user)" >
    <div class="row">
      <div class="col-md-12">
        <div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern)  }">
          <label>Email</label>
          <input ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="abc.user.email" required="" />
          <p class="help-block error-block">Enter a valid email address.</p>
        </div>
      </div>
    </div>

    <p ng-show="abc.myForm.email.$error.pattern">
      Not valid email!
    </p>

    <input type="submit" class="btn btn-primary">

  </form>


</body>

</html>

I do not _want_ to use the built in error display, I want to use my own (the Bootstrap one) — Steve, Mar 20 '17 at 17:16
Your corrected code pointed me to my error. I forgot the `abc` for the ng-pattern I had, it should have been `ng-pattern="abc.emailFormat" ` — Steve, Mar 20 '17 at 17:25

AngularJS show email field error on submit?

Update

2 Answers2