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 ;-)
Related
Anyone help because I try with the latest vision of 5.0.0 of ngx-bootstrap but still it is not working.
As i showed bellow I follow [official doc][1] steps but it is not working
In HTML:
<input formControlName="Country"
[typeahead]="Country"
[typeaheadOptionsLimit]="7"
[typeaheadMinLength]="0"
[typeaheadAsync]="true"
placeholder="Type here"
class="form-control">
</div>
[1]: https://valor-software.com/ngx-bootstrap/#/typeahead
You need to import the ngx-bootstrap type ahead module into your module. Add TypeaheadModule to your imports section of your module.
By adding [attr.typeahead] problem is solved
the solution is
<input formControlName="State"
[attr.typeahead]="states"
placeholder="Typeahead inside a form"
class="form-control" />
but
the new issue is accord because of this new list is not appearing anyone know what this happens and how to solve it.
after upgrading Google Chrome to version 63.0.3239.84 I have started receiving errors and warnings in console such as:
[DOM] Found 3 elements with non-unique id #SMTPSetting:
[DOM] Input elements should have autocomplete attributes (suggested: "current-password"):
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Just add autocomplete attribute to inputs and the warnings will disappear. For example:
<div class="form-group">
<input type="email" class="form-control" autocomplete="email" required>
<input type="password" class="form-control" autocomplete="password" required>
</div>
If you don't have or just don't want to set value for the attribute autocomplete use autocomplete="foo" so that warning message disappears.
More information at: https://chromereleases.googleblog.com/2017/12/stable-channel-update-for-desktop.html
They appear to have added this option recently, which hides recommendations:
-source:recommendation
in the filter box.
Found it by accident. The filter box also support auto-complete with Ctrl+Space (Windows).
I have same problem as described in this toppic:
Angular JS ng-message inside directive
Unfortunatelly that solutions is not working for me, because I am using my custom directive inside ng-repeat. So now ng-messages work only when error condition is fulfilled for all inputs.
http://plnkr.co/edit/lJT48bmYvR9DGFliIYDH?p=preview
I have tried many ways for creating ng-messages condition but nothing worked properly. Two of them You can find in above plunker:
ng-messages="form.doubleInputLeft.$error"
ng-messages="form['doubleInputRight' + $index].$error"
Please help me,
Regards
For input elements to work inside an ng-repeat, the index must be included as part of the name attribute.
<!-- index must be included in the name attribute --
<input name="doubleInputLeft" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
-->
<input name="doubleInputLeft{{index}}" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
<div ng-messages="form['doubleInputLeft'+index].$error" class="ngMessagesClass" ng-messages-multiple>
<div ng-message="minlength" class="ngMessageClass"> {{leftInputHeading}} must have at least 2 characters.</div>
<div ng-message="maxlength" class="ngMessageClass"> {{leftInputHeading}} must have at most 20 characters.</div>
</div>
Otherwise, the repeated elements will have duplicate names.
The DEMO on PLNKR
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.
This question already has answers here:
Disable spell-checking on HTML textfields
(7 answers)
Closed 2 years ago.
Is there a way for a web developer to turn off Chrome/Safari/WebKit's spellchecking on particular input or textarea elements? I mean either by special tag attribute or a proprietary CSS instruction.
There is a CSS instruction for turning off outlining of inputs so I thought that might also exist. I know how a user can do it.
Or, as a user, can I disable it for some particular domain?
Yes, there is the HTML5 spellcheck attribute.
<textarea spellcheck="false"> or <input type="text" spellcheck="false">
http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#spelling-and-grammar-checking
Update: This is now supported in the latest versions of all browsers.
This works in Safari 7.1 and should work also in others:
<input autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false"/>
Only spellcheck="false" didn't work.
for all elements of a form it is possible and so:
<form spellcheck="false" .. />
In React, you gotta use spellCheck instead.
<input spellCheck={false} type="text"/>
Regarding outlining of input tags: don't do it, it's a visual cue for users.
But if you must:
#your-input{outline:none;}