Umar Syal Umar Syal - 2 months ago 9
AngularJS Question

performing Angular form validations without using HTML form tag

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

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>
Comments