2

I am working on an angular web page on which I have used angular material controls. I have a md select control which I have defined as follows:

<md-select ng-model="organization" required="true" name="organization">
    <md-option value="">Organization</md-option>
    <md-option ng-repeat="organization in organizationDescriptions" value="{{organization.text}}">
        {{organization.text}}
    </md-option>
</md-select>

This lives on a parent form whose $invalid property controls the behavior of a button. Whenever I select a value from the dropdown, the form becomes valid and the button is activated. If there is no value selected then the button is disabled.

However, I also implemented local storage using ngstorage. What this does, is that it automatically manages the state of the properties of the scope and saves them into the local storage of the browser. This means that whenever I refresh the page the same dropdown value is selected. This works completely fine.

However when performing a refresh, the $invalid property of the form is now set to true (even though the md select value is correctly set). How can I solve this?

luisgepeto
  • 763
  • 1
  • 11
  • 36

1 Answers1

0

EDIT: The issue is already solved in the recently released public version 1.1.0

I've been facing with the same issue, and I can confirm you that is an angular-material bug that is solved in the HEAD(master) version. Hopefully it will be released in the next (and long awaited...) 1.1.0 release. There is some closed issues about it. Example

  • Plunker with angular-material 1.1.0-rc5 (it fails)
  • Plunker with angular-material HEAD(master) (it's working fine)

I've been wasting some hours... so hope it helps other people.

(With attached plunkers I need to put some code...Your code will work like a charm with the next angular-material release):

<md-select ng-model="organization" required="true" name="organization">
    <md-option value="">Organization</md-option>
    <md-option ng-repeat="organization in organizationDescriptions" value="{{organization.text}}">
        {{organization.text}}
    </md-option>
</md-select>
troig
  • 7,072
  • 4
  • 37
  • 63