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>
ng-diabled="login.$invalid"
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>