C
C
codenaki2017-10-30 10:53:29
JavaScript
codenaki, 2017-10-30 10:53:29

How to work with Angular validation?

<div class="container" ng-app="loginForm">
        <div class="row" ng-controller = "loginController">
            <form class="col-lg-6 col-md-6 col-sm-6 col-xs-6" name="login">
                <div class="form-group">
                    <label for="uname">User name:</label>
                    <input type="text" ng-model="data.username" class="form-control" id="uname" name = "uname" data-toggle="tooltip" title="User name">
                    <p style="color:red" ng-show="false">

                    </p>
                </div>
                <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" ng-model="data.email" class="form-control" id="email" name="email" data-toggle="tooltip" title="Email">
                    <p style="color:red" ng-show="login.$error.email.$error.email">
                        {{data.email}}
                    </p>
                </div>
                <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" ng-model="data.password" class="form-control" id="pwd" name="password" data-toggle="tooltip" title="Password">
                    <p style="color:red" ng-show="false">
                        {{data.password}}
                    </p>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <pre>{{login | json}}</pre>
        </div>
    </div>

When outputting {{login | json}} , I get an object with properties and information about changing these properties ..
When writing an incorrect email , an $error object with an error is added to the property.
Logically, this paragraph should appear when an error occurs, that is, when it is equal to true , but this does not happen, why?
ng-show="login.$error.email.$error.email"
Example : added object in case of error , output from <pre>{{login | json}}</pre>the given line .
{
  "$error": {
    "email": [
      {
        "$viewValue": "m",
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": false,
        "$touched": true,
        "$pristine": false,
        "$dirty": true,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "email": true
        },
        "$name": "email",
        "$options": {}
      }
    ]
  },

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Manakov, 2017-10-30
@gogolor

Use login.email.$error.email

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question