Materialize: Function to update field labels

[im-n1]

Hi guys,

I have a proposal and I do think, I'm not the only one who has this kind of issue.
When I update empty text field with a value, for example via Angular, the label does not slide up.

I have read some stuff about how angular binds events and I know it's almost impossible to catch the action nad hook it up. But if there would be a global method, lets say updateLabels([form]), which would go thru the document or given form/element and updates all the labels to be above the fields, that would be great.

Or is there a simple solution how to write such functionality by myself?

[dhawken]

Is this a dup of #591?

[im-n1]

Well I guess so :)

So the solution could be something like "wall thru all the fields and if fiels has a value, set class "active" to it's label"? Am I right?

[dhawken]

Yes, I believe you're right. I had a similar issue and used that class to alleviate it on fields where I had data. However, if the data is more dynamic (you don't know which fields will have values), your proposal might be a better thing. I'd have to run a test to see what the active class will do when there actually isn't data.

[Dogfalo]

@grafa This is already done in our forms.js

var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
 $(document).ready(function() {
      $(input_selector).each(function(index, element) {
        if($(element).val().length > 0) {
          $(this).siblings('label, i').addClass('active');
        }
      });
    });

[im-n1]

@Dogfalo I supposed there is something like that :)

I see you run the "fix" when the document is ready. It would be better to have it in a separated public function and then call the function.
In my case I fill the form fields with Angular (asynchronously) so my fields get values after page page load.

[Dogfalo]

Right, we're planning better support for angular / meteor in upcoming releases, but the fix for now is to either add active yourself to the label ,or to run this code above (without the document.ready())

[im-n1]

Cool, can't wait for the Angular support.

I will do so ;)

Thanks for your time!

[im-n1]

Just a quick update. Dunno why but when I change my scope, and then call the function @Dogfalo provided, nothing happends. After detective work it seems when u select input value by jQuery which was set by angular, it gives you nothing (input is empty). But if you try this with a little delay, jquery returns real value.

So I put @Dogfalo's function into setTimeout function with 100ms delay and it works like a charm.

But....dafuq? :)

[Dogfalo]

added in e36d13c3ac2342b7992c596058bb717e8c2a5919
Materialize.updateTextFields()