How to enable or disable input fields dynamically in angular js material design

Question

I am having an issue with ng-disable. as i am using angular material i think this is not working. I want my input box to be disabled or enabled dynamically based on condition.

Note:- I have multiple input fields i want disable or enable all of the at a single shot.

I am trying like this

<md-input-container class="md-block" flex-gt-sm>
    <label for="Autocomplete">From</label>
    <input required type="text" class = "hideShadow" ng-model="FromLocation"
           uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" 
          class="form-control" ng-disabled="isDisabled">
    <div ng-messages="searchFlight.FromLocation.$error">
    <div ng-message="required">Please enter from location</div>
     </div>
</md-input-container>

I am trying to access ng-disabled="isDisabled" dynamically like this

$scope.isDisabled = true;

But this is not working. May i know where i am going wrong?

I got a solution. i am keeping my JS in wrong place my bad :( — Hemanth Paluri
– Hemanth Paluri, Commented Oct 26, 2016 at 5:13

Fernando Soares · Accepted Answer · 2016-10-26 05:17:06Z

8

I believe the problem is in the way you did bind the property isDisabled.

try this:

$scope.model = {
    isDisabled: true
};

Then:

ng-disabled="model.isDisabled"

This problem occur when we try to bind a primitive property on a directive. We need to bind a attribute of a object to work properly.

answered Oct 26, 2016 at 5:17

Fernando Soares

1144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clíodhna · Accepted Answer · 2017-08-22 11:10:38Z

2

You can enable or disable the field by using ng-disabled

For example, if you want to disable a button initially and after performing something you want to enable the button,

<button class="btn btn-default" type="submit" ng-disabled="isDisabled" ng-click="ok()">OK</button>

$scope.isDisabled = true;

$scope.save = function(){
//after completing the operation set the values of variable to false
$scope.isDisabled = false;
}

edited Aug 22, 2017 at 11:10

Clíodhna

8281 gold badge15 silver badges30 bronze badges

answered Aug 22, 2017 at 10:33

meenal

3243 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to enable or disable input fields dynamically in angular js material design

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related