Is it possible to use conditional attributes in Polymer 1.0?
I've try to find it in the migration guide and also in Road to polymer without success.
I know that in Polymer 1.0 there's a new conditional template, but I don't want to duplicate my code.
So in 0.5 version we can had something like:
<input readonly?={{my-boolean-expression}} (...)>
And, in 1.0, should we do it with a template?
<template is="dom-if" if="{{my-boolean-expression}}">
<input readonly (...)>
</template>
<template is="dom-if" if="!{{my-boolean-expression}}">
<input (...)>
</template>
See the docs here.
What you will want to do is:
<input readonly$="{{my-boolean-expression}}">
Related
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 ;-)
In Polymer 1.0 I'd repeat the <option> tags inside the <select> tag like this:
<select>
<template is="dom-repeat" items="{{items}}">
<option value$="[[item]]">[[item]]</option>
</template>
</select>
But in Polymer 2.x it's recommended to use the <dom-repeat> tag:
<select>
<dom-repeat items="{{items}}">
<template>
<option value$="[[item]]">[[item]]</option>
</template>
</dom-repeat>
</select>
But this does not work. So how to repeat <option> tags in Polymer 2?
This issue looks similar to the one reported for <dom-repeat> inside <table>.
The workaround for now is to use "hybrid mode", where the 2.0 <dom-repeat> wraps a <template is="dom-repeat">:
<select>
<dom-repeat items="[[items]]">
<template is="dom-repeat" items="[[items]]">
<option value="[[item]]">[[item]]</option>
</template>
</dom-repeat>
</select>
codepen
UPDATE: #DocDude (Arthur Evans from the Polymer team) noted in Slack that using <template is="dom-repeat"> will still be supported inside a Polymer 2.0 element. You only need to use the element wrapper from outside the element (e.g., in index.html).
#KevinShaaf from the Polymer core team has also confirmed this in GitHub:
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.
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 am using Polymer Web Components and my application targets Chrome. On my form, outside the Web Components I have an input type='number', when I enter 'a' into the input and submit the form, I get a tooltip that says "Please enter a number."
However, I have another input type="number" that is in the Shadow DOM of a web component. When I enter 'a' into that field and submit the form, I get no tooltip. Is there anyway to make the behavior more consistent?
I'm not seeing the same problem you describe (using Chrome 36 and Polymer 0.3.3). The form validation works as expected with the following simple Polymer element (jsbin):
<polymer-element name="test-element" noscript>
<template>
<form>
<label>Inside the element:</label>
<input type="number" placeholder="Numbers only!">
<input type="submit">
</form>
</template>
</polymer-element>
EDIT: In the examples you've shown, your host page's <form> is separated from the Polymer element's <input> due to the shadow DOM boundary. Is there a reason you're structuring things that way?
It doesn't look like any <input>s that exist in the shadow DOM actually get submitted along with a light DOM <form>, so the fact that they're not being validated is in a sense expected and the least of your concerns. (Take a look at the Network trace for this example and you'll see that only test=1234 gets submitted.)
Taking the approach in the example above and including the <form> in the Polymer element is enough to get the expected validation behavior that modern browsers offer. Alternatively, if all you really want is <template> and you don't need a full blown Polymer element, you could do something along the lines of (jsbin):
<form>
<template is="auto-binding">
<label>Inside the element:</label>
<input type="number" placeholder="Numbers only!" value="{{myNumber}}">
</template>
<input type="submit">
</form>
<script>
document.querySelector('template').myNumber = 34;
</script>
That works too, because once the <template> is bound, the contents are added directly to the page's DOM like any other element.
If you strongly that you can't refactor your code as described, then I think you'd need to address your concern via bugs against the web browsers in question and see if they have any willingness to start considering <input> elements in the shadow DOM as part of a light DOM's <form>.