0
Using the CSS framework Materialize, I came across the following situation. I own some fields <input> with <label> as the example:
<label for="name">Nome</label>
<input type="text"
formControlName="name"
id="name"/>
What generates this result:
So I changed the element <label> adding the class .active, as shown in documentation:
<label for="name" class="active">Nome</label>
<input type="text"
formControlName="name"
id="name"/>
What generates the desired result:
However, if I select the empty field and click out of it without writing anything it goes back to its original state. How can I force the field to the "active" state (force the page behavior to as if the field was filled)?
If your code is the same in the two references in your question, shouldn’t you have a class? Another thing, take a look at this, see if it solves, I believe that the field should have a placeholder as in the last image... https://answall.com/questions/272038/materialize-css-label-fixo-topo/272057#272057
– hugocsl
@hugocsl thanks, I added the class. On the link, solved my problem. But there is a way to force the state of a component in the way I described?
– Arthur Siqueira
Puts an empty placeholder in the input:
<input placeholder ...>– Sam
Yes, in the Blur you go back to class like
<input type="text" onblur="this.classList.add('ativo');">has to see if this will have more force than the JS that removes the class, if it does not work puts in a separate js and indexes after the js of Materialize. Maybe with the empty placeholder like @sam said too...– hugocsl
I haven’t tried it but suddenly it might help. Supposing you have one
FormGroupwith the namemeuFormGroup, you could use the propertytouchedofFormControlnometo inject the CSS class:<input [ngClass]="{ active: meuFormGrou.controls.name.touched }" type="text" formControlName="name" id="name" />. Thetouchedwill only betruewhen the eventonBluris fired into the component.– Marcelo Vismari