How to Disable md-button
14,698
Solution 1
simply use ng-disabled="true"
.
declare a function in your controller something like
checkInputFields
which return either true
or false
depending on the form modal.
then use
<md-button ng-disabled="checInputFields()">
Submit
</md-button>
Solution 2
<form ng-submit="search()" name="searchSideNav">
<div layout="column" layout-align="center">
<md-input-container flex>
<label>{{::labels.documentName}}</label>
<input ng-model="searchItems.sDocumentName" ng-required="" name="sDocumentName">
<div ng-show="searchSideNav.sDocumentName.$invalid && !searchSideNav.sDocumentName.$pristine">
<p ng-show="searchSideNav.sDocumentName.$error.required" class="help-block">Document is required</p>
</div>
</md-input-container>
<md-button ng-disabled="searchSideNav.$invalid">
Submit
</md-button>
</div>
</form>
Related videos on Youtube
Comments
-
Albert Pinto about 2 years
I have a form(HTML) and a directive to do stuff when submit button is clicked.The form has 10 input fields. The requirement is to keep the submit button which is a disabled till the time user enters value in at least one field.
Can anyone please help me. Iam new to angular and could not find much help.
-
Albert Pinto almost 9 yearsi dont have a controller but the form is sitting in a directive. i tried your suggestion by putting a method in the directive but the directive has to know when a value is entered.
-
Albert Pinto almost 9 yearstried that but is not working for some reason my form is not invalid
-
Mohan Singh almost 9 yearsPlease make sure all fields of form should have name attribute. Can you please post your form html here
-
atinder almost 9 yearsuse
bindToController
in your directive and declare your method on the the controller of directive. -
Albert Pinto almost 9 years<form ng-submit="search()" name="SearchSideNav"> <div layout="column" layout-align="center"> <md-input-container flex> <label>{{::labels.documentName}}</label> <input ng-model="searchItems.sDocumentName" ng-required="requireAtleastOneInput()"> </md-input-container> <location-select label="{{::labels.location}}" location="selectedLocation"></location-select> <br/>
-
Albert Pinto almost 9 yearsits just a portion of the html
-
Mohan Singh almost 9 years@AlbertPinto I have updated my answer. Please focus on validation and form field's attribute. Validation does work only when you have added name attribute. Now it should work. Please check. Else i can create the plunker for you