vue.js textbox disappears with v-model keyword - javascript

One day old vue.js programmer here. No experience with Javascript either. First time asking question on this forum.
Modifying someone else's code. Whenever I add v-model keyword, the control stops displaying.
Javscript
var layoutHeader = Vue.extend({
template: '#layout-header-tpl',
props: ['userinfo']
});
Html
This works, textbox is displayed (there is no v-model keyword)
<template id="layout-header-tpl">
<input type="text" class="form-control" placeholder="Search">
</template>
2) This does not work, textbox disappeares (added v-model keyword)
<template id="layout-header-tpl">
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>
3) This does not work, textbox disappeares (removed id from template)
<template>
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>
4) This works, textbox is displayed (commented out the template)
<!--<template>-->
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
<!--</template>-->
Any idea what is going wrong?

You mentioned you are trying to reuse / modify someone else's code. I believe you are trying to do some kind of "inheritance" by using Vue.extend.
If so, please note that inheritance is not recommended. For details, here is the link to discussion topic: https://github.com/vuejs/Discussion/issues/354
That discussion was around Vue 1.0 version, but I believe it is still relevant for Vue 2.0.
As mentioned in that page, if you are working in a team and sharing code / components, then you may use mixins instead. You will find more details in the docs: http://vuejs.org/guide/mixins.html

Related

Is there a way to disable chrome autofill option for angular form fields

I have tried using autocomplete false and also auto complete off. The cache is removed from the field, but iam still seeing chrome autofill data. Is there a way to disable chrome autofill option in angular forms? Any suggestions would be appreciated. Thanks
Please check the autocomplete="new-password":
<input type="password" name="password" value="" autocomplete="new-password" />
It worked for me. Found in Google documentation
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Through some trial and error testing, it appears that if you set the input name and autocomplete attributes to a random string, Chrome's autofill is prevented from appearing. I created a small directive to achieve this.
import { Directive, ElementRef, Renderer2, AfterViewInit } from '#angular/core';
#Directive({
selector: '[appDisableAutofill]'
})
export class DiableAutofillDirective implements AfterViewInit {
constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) { }
ngAfterViewInit() {
const randomString = Math.random().toString(36).slice(-6);
this.renderer.setAttribute(this.el.nativeElement, 'name', randomString);
this.renderer.setAttribute(this.el.nativeElement, 'autocomplete', randomString);
}
}
Just change your input from type TEXT to type SEARCH.
<input type="search" name="your_address" autocomplete="nope" />
Chrome fill work with text fields but it's ignored on search type.
Chrome seems to ignore all practical/clean attempts to stop this - so we need to get a little hacky. I prevented this using 2 honeypot inputs. They can NOT be "display:none" or they will get skipped. So I wrapped them in a div that's height:0; overflow:hidden; and gave them opacity 0 (just to be double sure). Your real inputs must come AFTER the honeypots. See below
<!-- honeypot prevents chrome user autofill bs-->
<div style="height:0; overflow:hidden">
<input style="opacity:0;" type="email" value="" class="" />
<input style="opacity:0;" type="password" value="" class="d-" />
</div>
<!-- end honeypot -->
<!-- ... then put your real inputs after-->
<input type="email" name="email" value="" class="" />
<input type="password" name="password" value="" class="d-" />
<!-- end honeypot -->
Disabling autocompletion
To disable autocompletion in forms, you can set the autocomplete attribute to "off":
You can do this either for an entire form, or for specific input elements in a form:
<form [formGroup]="exampleForm" autocomplete="off">
...
</form>
// or
<form [formGroup]="exampleForm">
<div>
<label >Credit card:</label>
<input type="text" id="cc" name="cc" autocomplete="off">
</div>
</form>
To Disable in Login Fields:
many modern browsers do not support autocomplete="off" for login fields:
to prevent autofilling of password fields, you can use
autocomplete="new-password"
I had similar issue, I was not able to resolved it with any of the solution maybe because I was using third party for Google places Autocomplete ngx-google-places-autocomplete
where autofill overlapping google suggested address. I was able to resolve it using focus event as shown below
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"
type="text" class="form-control" id="address1"
formControlName="address1" placeholder="Street address, P.O. box" required (focus)="setAutoFillOff($event)">
setAutoFillOff(event: any) {
if (event) {
event.target.attributes['autocomplete'].value = 'chrome-off';
}
}
I am putting out this to helps who might be in similar situation.
It appears that autocomplete="off" can be used directly on form tag.
Useful when you have a lot of text inputs
<form [formGroup]="vmForm" autocomplete="off">
Google Chrome Version 78.0.3904.108
TLDR; Don't label your inputs with obvious names or Chrome will pick that up and autofill the input.
I often use a form-group class to wrap my labels and inputs together, pretty common practice. So much so the only way I found to get around AutoFill in Chrome (Angular 8, Chrome v80) was to change the value of my label for the input.
Turns Off AutoFill:
<div class="form-group">
<label for="aRandomPlace" class="form-group-label">Pickup Location</label>
<input type="text" name="aRandomPlace" [(ngModel)]="data.address" class="form-group-input">
</div>
Does Not Turn Off AutoFill:
<div class="form-group">
<label for="address" class="form-group-label">Pickup Address</label>
<input type="text" name="address" [(ngModel)]="data.address" class="form-group-input">
</div>
I believe we are discussing to disable 'autosuggestions' not 'autocomplete'
"Autocomplete=off" works for the text type input field but the browser ignores it if it is password type. there are lot many suggestions to use "Autocomplete='chrome-off', 'new-password'" but these are not meant to disable autosuggestions.
for these, I prefer masking technique to mask the content.
.autocompleteOff{
-webkit-text-security: disc;
}
<input class='autocompleteOff' type=text>
Just add to all the HTML input tag which is being auto filled within a form tag as bellow:
<input type="text" class="form-control" id="inputId"
name="inputName" autocomplete="new-inputName"
[(ngModel)]="model">
Note: Use "new-form_element_name" as autocomplete property as shown above.
It worked for me!!!
I found the answer in documentation and it works like a charm.
You can find more about it here.
<input type="text" autocomplete="off" name="one-time-code" id="one-time-code">
Usually what I do is I change type of input dynamically for example in Angular:
[type]="(field.length > 0)? 'password' : 'text'"
In this manner, the browser is unable to recognise the password field the first time you click it and will not provide a suggestion. However, if the field value has been input once and then erased, the browser will provide a suggestion. (At least it is not providing suggestion for the first time).

Angular1: How to reflect ng-model errors on another element?

I have a directive with the following template
<div>
<span class="label">My Label</span>
<input ng-model="name" required>
</div>
I want the label to be painted red when the input field is invalid.
How can I do that?
Currently I have another directive to sync all the errors from ngModelCtrl to the wrapping div
<div add-all-errors>
...
</div>
And the directive's link function does something like this:
const ngmodel = $element.find('[ng-model]').controller('ngModel');
$scope.$watch(()=>ngmodel.$error, addAllClasses, true);
Where addAllClasses simply makes sure the correct classes appear on the element..
I also tried just adding the same ng-model
<div ng-model="name">
...
</div>
But did not see the classes there..
any better way to do this?
This is why we use the angularjs form... I'm really not sure why people are against using a very handy feature.
I've made a plunker for you.
https://plnkr.co/edit/bGOcQjWzlRq2aTYZUYNm?p=preview
<form name="form">
<span ng-class="{red: form.name.$invalid}">Name:</span>
<input name="name" ng-model="name" required>
</form>
A little more insight of what's going on. form is added to the scope auto magically by angularjs by it's name. In this case, I named it form, however it can be any name.
Now form is an ngForm Object and adds all input field into it by their name attributes. This way we can do form.name to get another object similar to the ngForm Object. We can then use $invalid or $valid properties with ng-class.
ngForm is pretty powerful and is loaded with many cool properties and methods. Just call console.log(scope.form); You will need to put in a method and add it to ng-change to see updates.

Vue JS - Rendering Multiple Instances of Components

Development Environment:
First, I am using Vue 1.0 and Vueify 7.0.0 using the latest node. js, npm and browserify to compile the code on an Ubuntu machine with a local Apache Server.
The Problem:
I have created a custom component for <form-input/> which renders without an error. However, when trying to place them next to each other only one will render:
<form>
<form-input />
<form-input />
<form-input />
</form>
In order to get multiple components to render I have to wrap each one in it's own <div>.
<form>
<div><form-input /></div>
<div><form-input /></div>
<div><form-input /></div>
</form>
For reference the <form-input /> template looks like this:
<template>
<div class="input-group">
<label"></label>
<input name="" class="form-control" type="text">
</div>
</template>
Not that it's a terribly bad problem, but it's so much easier to read without the extra <div> tags.
Question:
Is this expected behavior because each component needs its own dom element to bind to or am I missing something?
FYI:
I have also tried wrapping the template with an extra div tag, but that didn't help. I also do not get any compile or runtime errors either way it writes the template.
Thanks in advance.
I am not sure if this could be causing the issue, but self-closing tags are not recommended by the creator of Vue.js: https://github.com/vuejs/vue/issues/1036. Do you still have an issue if you change the inputs to <form-input></form-input>?
I don't know how this advise will work with Vue 1.0, but with Vue 2.0 this works fine:
you just need to add for each component the key attribute which tells Vue to render these custom components as separate components.
<form>
<form-input key="form-input-1" />
<form-input key="form-input-2" />
<form-input key="form-input-3" />
</form>

Conflict between AngularJS and Thymeleaf

am a newbie to angularJS and Thymeleaf and am experiencing some weird conflict.
This is what I have below
<input type="text" th:field="*{unit}" value="{{unit.unitID}}" class="unit_value"/>
Whenever the template is resolved and displayed in the browser, the value is set to empty as in something like this
<input class="unit_value" type="text" value="" id="unit" name="unit" />
am not having the angularJS expression in the value anymore.
I know the expression is synonymous to that of thymeleaf, I really dont know how to solve this.
I have searched everywhere but cant get a solution.
The Solution I found is to literally bind the tag yourself and releave thymeleaf from binding it that is just put in the expected generated html that thymeleaf will generate
<input type="text" name="unit" value="{{unit.unitID}}" class="unit_value"/>
And everything works fine.

AngularJS forms not finding input elements

At some point during the development of my app, AngularJS forms stopped working... Yes that means they used to work. That is, form elements are supposed to create their own scope with every <input /> by their name. However all my forms are now completely empty, as if I had no input elements with the name attribute. Now I can't make any sort of form validation. I've tried even the most trivial forms and still nothing:
<form name="form>
<input type="text" name="input" required />
</form>
Any suggestions as to how to debug this?
Hi to do validation your input have to have model directive please see here: http://jsbin.com/deref/1/edit
<form name="form">
<input type="text" name="foo" required ng-model="input.model"/>
<span ng-show="form.foo.$error.required">required</span>
</form>
Try console.log on the scope
console.log($scope.form);
If you have your controllers set up correctly, your form should be attached to the scope of controller.

Categories

Resources