javascript Angularjs validation not showing

Question

I am using ex6 and angularjs and I write an angularjs validation form. the HTML doesn't show up. it's not showing any errors.

The HTML of the validation :

<form id="form" name="login.sign" class="setup info" novalidate>
    <div class="input-group login-max-width">
        <span class="input-group-addon" id="login-addon">
            <i class="fa fa-envelope" id="login-addon"></i>
        </span>
        <input id="login.credentials.email" type="email" class="form-control email validate valid"
            name="login.credentials.email" ng-model="login.credentials.email" placeholder="Email" required>
    </div><br />
    <div class="input-group">
        <span class="input-group-addon lock-fix">
            <i class="fa fa-lock"></i>
        </span>
        <input id="login.credentials.password" type="password" class="form-control password validate valid"
            name="login.credentials.password" ng-model="login.credentials.password" placeholder="Password" ng-minlength="6" required>
    </div>
    <center>
        <div class="input-group text-center" ng-show="login.error">
            <h3 class="error-show">{{login.error}}<i class="fa fa-exclamation-triangle"></i></h3>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-4 login-flex-display">
                    <button type="submit" class="btn btn-success right-margin-button" ng-click="login.signIn(login.credentials)" 
                        ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Login 
                    </button>
                    <button type="submit" class="btn btn-success" ng-click="login.signUp(login.credentials)" 
                        ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Register
                    </button>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col-md-6">
            <h5 class="alert check-login white error-blue" ng-show="sign.credentials.email.$invalid">Email is not valid</h5>
        </div>
        <div class="col-md-6">
            <h5 class="alert check-login white error-blue" ng-show="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid">Password must be atleast 6 digits</h5>
        </div>
    </div>
    </form>

The routes.login.js :

import template from './login.html';
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
  $stateProvider
    .state('login', {
      url: '/Login',
      template: template,
      controller: 'LoginController',
      controllerAs: 'login'
    });
}

The login controller :

    import {createUser} from '../../api/usersApi';

export default class LoginController {
  constructor($location, authentication) {
        this.location = $location;
        this.authentication = authentication;
        this.error = '';
    }
}


LoginController.$inject = ['$location', 'authentication'];

Thx for the help guys. hope you have any idea how to solve it out. i think its related to the "sign" and to controller as name "login" But i still didn't figure it out.

Answer 1

try to change ng-show="login.error" to ng-show="login.sign.error" angular bind the the error to the name of the form

I hope this helped you.