3

I am using bootstrap material design for my angular app. Everything works fine except when I change the models associated with inputs (floating label inputs) programmatically after the page has been loaded, the floating labels are not floated.

FLoatinglabel issue

T J
  • 42,762
  • 13
  • 83
  • 138
Anoop Kc
  • 147
  • 1
  • 9

2 Answers2

4

You must fire a change event when you change the value programmatically.

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
  • A clean way to do it is changing ng-model directive as proposed in [this comment](https://github.com/FezVrasta/bootstrap-material-design/issues/148#issuecomment-150169488) by [Josephdias92](https://github.com/Josephdias92) at github. – atfornes Aug 31 '16 at 17:14
  • 1
    Yes actually if someone wants to use a framework like Angular, React or so on should avoid to use the built-in JS and write its own components – Fez Vrasta Sep 01 '16 at 11:09
0

If you are using Angular2 then no custom directive is needed. On the label do something like this.

<label [class.active]="name && name.length > 0">Some Label</label>
KevinM
  • 1,799
  • 4
  • 28
  • 58