AngularJS validate on template

Question

I want to validate my inputs from the template itself.

The span with the ng-show it not showed when the input is valid

I have to idea what am I doing wrong here:

<form name="registerForm" class="js-validation-register form-horizontal push-50-t push-50">
    <div class="form-group">
        <div class="col-xs-12">
            <div class="form-material form-material-primary">
                <input class="form-control" type="text" id="username" name="username" placeholder="Please enter a username" ng-required="true">
                <label for="username">
                    <span ng-show="registerForm.username.$valid" class="text-success"><i class="fa fa-check-circle"></i></span>
                    Username
                </label>
            </div>
        </div>
    </div>
</form>

please your help

Can you give us some clue of what's not working or not behaving as you are expecting? — Lex
– Lex, Commented Dec 14, 2016 at 17:12

Rohìt Jíndal · Accepted Answer · 2016-12-14 20:22:30Z

You forgot to add ng-model in your input.

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="registerForm" class="js-validation-register form-horizontal push-50-t push-50">
    <div class="form-group">
        <div class="col-xs-12">
            <div class="form-material form-material-primary">
                <input class="form-control" type="text" id="username" name="username" placeholder="Please enter a username" ng-model="username" ng-required="true">
                <label for="username">
                    <span ng-show="registerForm.username.$valid" class="text-success">username is valid</span>
                    Username
                </label>
            </div>
        </div>
    </div>
</form>
</div>

sandyJoshi · Accepted Answer · 2016-12-14 18:43:07Z

1

You need to add ng-modal to your input

<input class="form-control" ng-modal="modal" type="text" id="username" name="username"placeholder="Please enter a username" ng-required="true">

answered Dec 14, 2016 at 18:43

sandyJoshi

7539 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS validate on template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related