I am new to Polymer. When using paper-elements 0.5 I was able to get a nice floatingLabel when the field is active / when the user enters the input field.
0.5
<paper-input-decorator id="searchText"
floatingLabel
label="find an author">
<input is="core-input" id="sInput">
</paper-input-decorator>
However, this is not working in the same way with 1.0.0 (paper-elements 1.0.5). Documentation mention a property alwaysFloat which is not working the same as 0.5 (instead they float the label all the time). I couldn't understand if this has been deprecated. Would appreciate some help.
You are looking for <paper-input> element. This element make that effect by default.
<paper-input label="your label"></paper-input>
Here you can find documentation about it.
Related
So I'm working in this Angularjs project using mostly material. I need to setup a timepicker so I'm using the input control with the type=time. Problem is, I need to setup this control to only let the user pick the time in a 30 minutes range. For example, 11:30 or 11:00 are allowed times; 11:12 is not.
If I remember correctly, one can use the "step" attribute to skip the minutes as needed but it seems it is not working anymore. For example, I setup the step attribute to 3600 but I'm still able to pick any minut in the clock.
How can I fix this?
Here is the part of the input code:
<md-input-container style="margin-top: 20px; min-width: 98%; margin-bottom:0;">
<label class="label-form-empleados" style="">
Hora Inicio Cita:
</label>
<input ng-model="HoraInicio" ng-disabled="fDisableHoraInicio" data-ng-change="CalcularHoraFin(ServicioSeleccionado)" type="time" step="3600" class="" placeholder="Hora inicio cita ..." autocorrect="off" autocapitalize="off" spellcheck="false" id="timeInicio" tabindex="11">
</md-input-container>
With an input of 1800 the step will be 30minutes. This should work.
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" step="1800" required>
Another option is use Kendo UI api for Angular. You'll only need to set the attributes.
I'm using Polymer with Chrome 63.0.3239.108 (updated this morning) and I got some new errors while launching my webapp:
[DOM] Found 3 elements with non-unique id #input
Here's my code :
<div class="card-content" on-keypress="_keyHandler">
<paper-input id="login" label="[[i18n('uid')]]"></paper-input>
<paper-input id="pwd" label="[[i18n('pwd')]]" type="password"></paper-input>
<paper-input id="server" label="[[i18n('server')]]"></paper-input>
</div>
Yeah, <paper-input> elements have the same id, but what can I do to remove this console error?
Thanks a lot
I had same issue when i was using angular 5.
I put "name" attribute into my tags and it fixed.
Like:
<input type="text" [(ngModel)]="user.userName" name="loginUserName" >
I had similar problems. Few days agonotwaldorf, the Polymer staff paper-input developer, closed a connected issue, releasing paper-input 1.2.0 on GitHub
So update your bower.json
with
"paper-input": "1.2.0",
or even better
"paper-input": "~1.2.0",
(that follows up possible patch releases)
Hoping have been useful ;-)
I have started trying to learn and use Polymer elements in our site. I need to only allow the users to put 4 numbers for a year so I wanted to have a maxlength="4" in my paper-input, but it would not work and keeps going over my maxlength limit.
<paper-input floatingLabel label="Please add the year in the format YYYY" name="birth_date" type="number" maxlength="4" char-counter error-message="numbers only"></paper-input>
However, when I put the example from paper-input-container with maxlength="4":
<paper-input-container>
<label>Your name</label>
<input is="iron-input" maxlength="4">
</paper-input-container>
This seems to stop the input at my maxlength, but it also uses much more code then I would like to use, as I have a decent amount of form questions for a user, as well as the fact that from the documentation and examples I have looked at, I do not see why my maxlength is not working in the <paper-input>. Am I missing something with the paper-inputs or am I using them wrong?
Also, if anyone knows of any good guides to form validation with polymer elements that would be much appreciated as well. Any advice is much appreciated for my issue.
For type="number", the properties max and min can be set. To allow the user to enter only 4 characters you can set type="string" and then validate that numbers are entered using the auto-validate-pattern property.
<paper-input label="only type numbers (auto-validate)" auto-validate pattern="[0-9]*" error-message="numbers only!" type="string" maxlength="4"></paper-input>
I found the demo examples for paper-input here useful to troubleshoot.
I am trying to create a register page using pure polymer. I used a paper-checkbox to let user check and agree the term of use. And my intention was only to display the submit button, (paper-button ) if the user has checked the user agreement. I am just wondering if there is a way that I can accomplish this using pure polymer instead of java script. I know paper-checkbox has a boolean property called "checked". I figure it would be nice that I could access this property inside my submit button and disable the button if checked is false.
Here is what I have, but it does not work
<paper-checkbox id="checkbox" checked$="{{ checked }}"> I agree user terms
</paper-checkbox>
<paper-button raised disabled$="{{ checked }}" onclick="submitForm()">Create
ID</paper-button>
Wrap your code in a dom-bind, and invert your disabled binding. Additionally, you want to bind to the element property rather than the attribute, so you can lose the dollar signs:
<template is="dom-bind">
<paper-checkbox id="checkbox" checked="{{checked}}"> I agree to user terms</paper-checkbox>
<paper-button raised disabled="[[!checked]]" on-click="submitForm">Create ID</paper-button>
</template>
I'm working on a forum theme and started using web components but the form elements don't work.
I have stuff like this:
<input type="text" name="subject" maxlength="85" value="{$subject}" tabindex="1" />
and I tried translating it like that
<paper-input floatinglabel="" label="{$lang->thread_subject}" type="text" name="subject" maxlength="85" value="{$subject}" tabindex="1"></paper-input>
and all kind of variations also nesting the element inside but it doesn't work.
Same goes for all other input elements like submit buttons, checkboxes etc.
For Polymer 1.0 see the new Iron Form element.
You can try something like this - http://jsbin.com/kurelaji/2/edit