angularJS avoid error message when value is empty

Question

I have a similar code like the one below for a registration form. In this example the email value is preload therefor the error is not shown. But how can I avoid the error when there is no preload value, in other words when the value is empty like:

$scope.Email = {valor:""};

Here is the example:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example59-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

</head>

<body ng-app="formExample">
  <script>
    angular.module('formExample', [])
      .controller('FormController', ['$scope',
        function($scope) {
          $scope.Email = {
            valor: "[email protected]"
          };
        }
      ]);
  </script>
  <style>
    .my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }
  </style>
  <form name="myForm" ng-controller="FormController">
    Email:
    <input name="input" ng-model="Email.valor" required class="my-form">
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
    <code>userType = {{Email.valor}}</code>
    <br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>
    <br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code>
    <br>
    <code>myForm.$valid = {{myForm.$valid}}</code>
    <br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>
    <br>
  </form>
</body>

</html>

Are you intentionally validating the email on page load for any reason? Or is that a side-affect of the way you designed your code? — Mark C.
– Mark C., Commented Nov 3, 2015 at 2:28
Oh, I just realized you copied the exact example from the documentation ... What have you tried and what didn't work? — Mark C.
– Mark C., Commented Nov 3, 2015 at 2:33

Community · Accepted Answer · 2017-05-23 12:23:08Z

1

You can just hide the error if the form is pristine (ie, the input hasn't been altered yet). Something like:

<code ng-if='myForm.myControl.$dirty'>myForm.$error.required = {{!!myForm.$error.required}}</code><br>

If that's what you're looking for, there's a thread with more detail over here: How to make ngMessage for required fields only show when dirty or submitting a form?

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Nov 3, 2015 at 2:25

Andrew Cavanagh

2772 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shohel · Accepted Answer · 2015-11-03 02:42:00Z

1

Change your css Replace by this

input.ng-invalid.ng-dirty {
      background-color: #FA787E;
    }

    input.ng-valid.ng-dirty {
      background-color: #78FA89;
    }

Instead of

.my-form {
      transition: all linear 0.5s;
      background: transparent;
    }
    .my-form.ng-invalid {
      background: red;
    }

answered Nov 3, 2015 at 2:42

Shohel

3,9645 gold badges41 silver badges80 bronze badges

Collectives™ on Stack Overflow

angularJS avoid error message when value is empty

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related