Disable the Button from frontEnd - angularjs

Question

I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?

Answer 1

all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>

Answer 2

some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>