label hiding input text field value in md-input-container when retrieving with ng-value

Question

When using angularjs to retrieve a value for a text input field with ng-value, the label the overlays the field doesn't transition above the field after the value is retrieved. I can only see the value in the input field after clicking on that field.

I'm using material's md-input-container:

      <md-input-container>
        <label>Name</label>
        <input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name" id="providerName" name="providerName" />
      </md-input-container>

Here's the Inspect Element code:

      <md-input-container class="">
        <label for="providerName">Name</label>
        <input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name ng-pristine ng-untouched ng-valid md-input" id="providerName" name="providerName" aria-invalid="false" value="a"><div class="md-errors-spacer"></div>
      </md-input-container>

You can clearly see that value="a" which was pulled after the page loaded using ng-value. But, the field still looks like this:

Only after I click on the field does it look how I would expect:

Is this a bug? Am I missing something? I though AngularJS and Material were supposed to play nice.

Available plunker here

I think this is not an issue with angular-material...it's the desired behaviour of angular. You could have a look to [this SO question](http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m) — troig, Dec 23 '15 at 15:15
This would help if I were the one adding the value attribute but ng-value adds that dynamically. — sigmapi13, Dec 23 '15 at 21:47

score 0 · Accepted Answer · answered Dec 24 '15 at 12:53

In a roundabout way troig's comment helped me figure this out.

This form is used to display and update a user's profile information. I was using ng-model to update the user's profile and ng-value to display any existing user profile info from the database.

ng-value spits back the value="" attribute which does not play nice with md-input-container. To get this to work properly, I removed ng-value, replaced ng-model's value with profileInfo.name, and modified my controller to allow me to save profileInfo.name instead of savedProfileInfo.name.

Code translation:

    <form ng-submit="saveProfile(profileInfo)">
      <md-input-container>
        <label>Name</label>
        <input type="text" ng-model="profileInfo.name" class="provider-name" id="providerName" name="providerName" />
      </md-input-container>

Moral of the story, ng-value does not play nice with md-input-container and form labels.

label hiding input text field value in md-input-container when retrieving with ng-value

1 Answers1