ons-input needs a value attribute when loaded dynamicaly

[qroft]

Hi there,
i am creating my first app with ONSEN and i use a “form” with several inputs. These are prefilled by values from local storage.
I was using the input fields like this:
<ons-input placeholder=“Text color hex code” float id=“setTXTcolor”></ons-input>

The problem: i entered some text and saved it as a local storage. Then i changed the page and loaded the saved value so that my form would be prefilled with the saved valus. But: the saved value was written above the placeholder text.

After trying out several things, i hade to find out that i have to add the “value” attribute to the ons-input with a blank space or in my case with three dots. So from the above, it became this one:
<ons-input placeholder=“Text color hex code” float id=“setTXTcolor” value="…"></ons-input>

Can anyone tell me if this is a good way to do it or am i missing something?

Greetings!
Carlos

[Fran Diox]

@qroft I cannot see any problem with this. Are you doing something very different form this? https://codepen.io/frankdiox/pen/ZWNLOL?editors=1010

[qroft]

The problem comes with the Material design - i think.

From what i see the problem is this:
The input field is build whilst the dynamic data (in your example the value “test”) is not loaded yet.
So Onsen seems to build the input field together with the placeholder text on the line.
Then Onsen loads the value inside that input field but nothing is triggered to inform the input field that the value has changed.
Thus results in that the value “test” is written above the text “The place holder”.

I already had this problem many months ago while experimenting with the Android Studio and can not remember anymore
how i solved it.

A workflow structure would be something like “after inputting all the prefilled form fields” refresh them - so that the placeholder text
can animate itself above the value"

As i said: this seems to be the problem with placeholder and float due to the Material design layout.

[Fran Diox]

@qroft I just updated the example to use Material Design, I still can’t see the placeholder over the text. I’ve tried also setting value="test" attribute instead of modifying it on ons.ready and still works.

I mean, I understand it could happen because of how the float label is implemented, but I can’t actually reproduce it.