performing Angular form validations without using HTML form tag

Question

I want to apply Angular Form Validation without using an HTML form. I tried following, but it doesn't disable the button.

<ng-form name="login">



 <div class="input-group">

   <span class="input-group-addon"><i class="fa fa-user"></i></span>

   <input type="text" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">

 </div>



 <div class="input-group">

   <span class="input-group-addon"><i class="fa fa-lock"></i></span>

   <input type="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">

 </div>



 <button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>



</ng-form>

tried using

ng-diabled="login.$invalid"

as well and that didn't work either. What should I do to make it work.

Answer 1

Just use ng-model in your form fields and it will work::

 <ng-form name="login">

 <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-user"></i></span>
   <input type="text" ng-model="username" name="username" value="" placeholder="Username" class="form-control" id="login-username" ng-required="true">
 </div>

 <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-lock"></i></span>
   <input type="password" ng-model="password" id="login-password" class="form-control" name="password" placeholder="Password" ng-required="true">
 </div>

 <button style="width: 100%;" title="" data-original-title="" role="button" class="btn custom-small-btn btn-primary hvr-float-shadow" ng-disabled="login.username.$invalid || login.password.$invalid">Login</button>

</ng-form>

performing Angular form validations without using HTML form tag

Sign up