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>
Related
I have 2 radio button, (input type radio),i used "checked" on the second, now, if i want to check the first radio button i need to click twice, how di i fix it ??
<label>YES</label> <input type={'radio'} name={'license'}/><br />
<label>NO</label> <input type={'radio'} name={'license'} checked={'checked'}/>
You are using uncontrolled inputs, so the React rendering cycle is interfering with the user modified state of the DOM.
If you continue using uncontrolled inputs, use defaultChecked and not checked. (See default values.)
Controlled components are recommended in most cases though.
I need to focus paper input in a paper dialog box. I have tried all available solution but nothing is working.
this.$.homeSearch.$.input.focus();
this is my markaup
<paper-input id="homeSearch" class="home-search-btn" placeholder="Where do you want to go?" no-label-float value="{{searchText}}">
</paper-input>
I don't want autofocus when page load. I need to fire focus event from a method.
Instead of
this.$.homeSearch.$.input.focus();
, you can do
this.$.homeSearch.focus();
instead. paper-input inherits from HTMLElement by default so it already has a focus method built-in.
I am trying to find a way to reset a form inside a dialog back to some default data after the dialog is closed/abandoned.
Say collaborators is a list from the server, each with an associated privilege level. My form provides a way to edit their privilege. If they abandon the dialog (without clicking submit), it should revert to their saved privilege, no matter what they selected in the dropdown.
When they abandon the dialog, I try doing this.$.users.render() to force the dom-repeat to re-compute _computeDropdown (which returns a paper-item index) and get rid of the user selection, even though items hasn't changed.
But render doesn't call the computed binding. Am I overlooking another way to reset the selection to default data here?
<template id="users" is="dom-repeat" items="[[ collaborators ]]">
<div class="field">
<paper-input disabled name="collaborator" label="[[ item.name ]]"></paper-input>
<paper-icon-button icon="close" on-tap="remove"></paper-icon-button>
<paper-dropdown-menu name="privilege">
<paper-listbox class="dropdown-content" selected="[[ _computeDropdown(item.privilege) ]]">
<paper-item>Owner</paper-item>
<paper-item>Collaborator</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
The dom-repeat has an observe attribute.
<template id="users" is="dom-repeat" items="[[ collaborators ]]"
observe="_updateHack">
should do the same.
As said in HTML Forms, all the disabled form fileds will be prevented from submitting on Form Submit.
In Angular JS if i used ng-disable for an Input field, then do the field gets really submitted if I do this way
<form>
<input type="text" ng-disabled="true" name="foo">
<button type="submit">submit</button>
</form>
If not why? feels like silly but bit confused on the subject
The library sets the boolean disabled attribute on the element, if ng-disabled has a value which is truthy. I believe the official documentation is quite clear on the subject. The part I referred to:
The HTML specification does not require browsers to preserve the values of boolean attributes such as disabled. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngDisabled directive solves this problem for the disabled attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
your example
<form>
<input type="text" ng-disabled="true" name="foo">
<button type="submit">submit</button>
</form>
You are setting ng-disabled to true so it adds disabled attribute to the form, if you submit the form, As said in HTML Forms, all the disabled form fileds will be prevented from submitting on Form Submit, so
with normal form submit, i.e in html way type="submit", the input values will be only posted through the form if the value inside ng-disabled is set to false or returns false.
in angularjs ng-submit same thing happens, i.e. the form is posted just that a method can be called after the form is submitted.
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>.