I know about this way to send a input from the user to the typescript (angular) :
<form >
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" />
</form>
But its looking for not very effective , i create a reference to the DOM with #input and after that send the input.value .
After all, I am very confused about the input.value does he refer to #input or to to (input)=...;.
Bottom line, is there a more efficient way to pass the value the user puts into the box, into the typescript file and then use it for another tag in the HTML file?
For example the user put a size of text and i want to use with the use on another tag on HTML ....
I think you are trying to use angular input inside a html input tag, which is not possible.
You need to use a keyboard event handler like "keyup", "keydown"...
<input type="text" [(ngModel)]="inputColor" (keyup)="sendInput($event)" />
If i understand well, you re looking for $event ?
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput($event)" />
typescript side:
sendInput($event) {
console.log('input value:', $event.data);
}
But $event.data will only contain the last typed char, is it what you re looking for ?.
EDIT:
With (input), you can have the content of input in $event.target.value:
<input #input type="text" [(ngModel)]="inputColor"
(input)="sendInput($event.target.value)" />
First of you you have used ngModel with input, so your inputcolor will have that value, and you can use it. But if you want it passed to a method you can do it like :-
<input type="text" [(ngModel)]="inputColor" (change)="sentInput($event.target.value) />
Change event will be fired as soon as user is done typing and click anywhere else.
then have a sendInput method in ts to copy received value in a property
public sendInput(value) {
this.data = value;
}
OR
If you don't need two way binding, you can use ngModel for one way binding as well like :-
<input type="text" (ngModel)="inputColor" />
After this typescript value change will not impact, only change in template will be reflected in typescript variable.
Using Angular 7.
Have an <input> tag like the following:
<input id="foo" type="text" class="bar" [formControlName]="'product'"
autocomplete="off [ngModel]="formGroup.controls.product.value" [readOnly]="true"/>
Eventually, myControl.setValue('some string'); is called.
The result is the <input> element displays [object Object].
I am trying to display the string from the setValue() call.
What am I doing incorrectly?
try like this you don't need to use [ngModel] you set product control directly
<div [formGroup]="form">
<input id="foo" type="text" class="bar" formControlName="product"
autocomplete="off" [readOnly]="true"/>
<button (click)="update()">Update</button>
</div>
component
form:FormGroup;
constructor(fb:FormBuilder) {
this.form = fb.group({
product:'init data'
});
}
update(){
this.form.get('product').setValue('Updated...')
}
demo 🚀
incase you just have single form control you have to use [formControl] directive
<input id="foo" type="text" class="bar" [formControl]="myControl"
autocomplete="off" [readOnly]="true"/>
<button (click)="update()">Update</button>
component
myControl:FormControl
constructor() {
this.myControl = new FormControl('init data')
}
update(){
this.myControl.setValue('Updated...')
}
demo 🌟
Remove the [ngModel] section of the input, that isn't needed if you're using formControlName as well.
When setting the value, we can't see how you're specifying myControl but the equivalent code would be:
this.formGroup.controls['product'].setValue('my string');
<input type="text" class="form-control"
id="transactionAmount"
maxlength="10"
OnlyNumber="true"
[(ngModel)]="userBalance.transactionAmount"
name="transactionAmount"
placeholder="Amount"
required
#transactionAmount="ngModel">
Here I have to hide zero amount while user entering the values.
If he enters all zero's then only we have to hide not in cases like 20,30,100 etc...
I'm using Angular 2.
<input type="text" class="form-control"
id="transactionAmount"
maxlength="10"
OnlyNumber="true"
[(ngModel)]="userBalance.transactionAmount"
name="transactionAmount"
placeholder="Amount"
required
#transactionAmount="ngModel"
(keyup)="hideZero()>
Added This keyUp event in Html and in .ts added below code
hideZero(){
if(this.userBalance.transactionAmount === '0' ){
this.userBalance.transactionAmount = '';
}
}
Working Absolutely fine
/* In your ts */
validateNumber(value: String) {
userBalance.transactionAmount = value && value.replace(/(?:0*)(\d*)/g, (_,value1) => {
return value1;
})
}
<input (input)="validateNumber($event)">
Try using (ngModelChange) event which will trigger when user types values. By using regex, you can remove the last zero value and update the DOM. Hope this helps.
Angular 0 value don't display
<span *ngIf="!pro.model === '0'">{{ pro.model }}</span>
Like this,
When model value is zero that time don't display model value.
If model value is not zero that time show model value in your html pages.
Using Angular 2 (2.0.0), what is the recommended way to dynamically mark a field as required, using Angular Forms?
In all of their examples, the required attribute is just added like:
<input type="text" class="form-control" id="name" required>
What if the model I'm binding to has an IsRequired property, that will be true/false?
If I use something like:
<input [(ngModel)]="field.Value" type="text" value="{{field.Value}}" [attr.required]="field.IsRequired"/>
That renders on the page like (note the ="true"):
<input type="text" required="true" />
For some reason, Angular doesn't appear to recognize this attribute when it has an actual value (the ="true") so when this field is blank, my form itself still is valid:
<form class="ng-untouched ng-pristine ng-valid">
So it would appear that I must use required and not required="true", but how can I add that attribute in dynamically?
What also doesn't work:
<input type="text" {{ getRequiredAttr(field) }} />
Thought I might be able to have a function that returns my string "required" based on the field, that just gives templating errors.
Is there a way to accomplish this and render only required for my attribute? Or a way to make Angular recognize this attribute when it has a value of true/false?
FWIW - I've verified that I can use *ngIf to write two near-identical <input type='text' /> controls based on my IsRequired property and hardcode one with the required attribute but that seems pretty hacky. Hoping there's a better way!
Why do you have to make it so complicated when you can simply do this,
[required]="isFieldRequired() ? 'required' : null"
The basic forms stuff is great for simple forms, but when you need more control like what you have here, that is when you need to start using the more advanced form stuff. What that would look like in your case would be something like this.
#Component({
selector: 'something',
template: `
<form #myForm="ngForm">
<input [(ngModel)]="field.Value" [formContol]="myFieldControl" type="text" [value]="field.Value">
</form>
`
})
export class MyComponent{
public field: any = {Value: 'hello', isRequired: false};
public myFieldControl: FormControl = new FormControl('', [this.dynamicRequiredValidator.bind(this)]);
public dynamicRequiredValidator(control: FormControl):{[key: string]: boolean}{
if(field.IsRequired && !control.value){
return {required: true};
}
return {};
}
}
Note: You will probably need to import the ReactiveFormsModule into your #NgModule. This comes from #angular/forms as well.
There is also another way you can do this with a directive shown here.
We are working on one web application in that one payment page is there.
In that we have two Text box one is for Credit Card Number and second one is for Verification Code and it type="Password".
Now problem is when page is load in google-chrome it found type="Password" it load Save email id in Credit Card Textbox and password in Verification Code.
Now try to solve this issue i was try out something like below.
<form autocomplete="off">
<asp:textbox autocomplete="off">
This above try is not work for me. i was googling it but by luck it's not work for me.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag since v34.
you can't cheat by create an hidden input over. Auto complete feature will get the first input text to fill data.
Method 1:
<form id="" method="post" action="" autocomplete="off">
<input type="text" style="display:none" />
<input type="password" style="display:none">
<asp:textbox autocomplete="off">
</form>
So put this before your textbox.
<input type="text" style="display:none" />
Method 2:
Change
autocomplete="off"
to
autocomplete="false"
Method 3:
Browser autofill in by readonly-mode.
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Method 4:
For username password combinations. Chrome heuristics looks for the pattern.
<input type="text" onfocus="this.type='password'">
Method 5:
jQuery
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
This is the only solution that worked for me with both Autocomplete and Chrome's Autofill:
It works also after calling new this.props.google.maps.places.Autocomplete
Add autocomplete="off" on the form tag.
Set autocomplete="none" directly on the input inside the form and set the attribute again on focus.
<form autocomplete="off">
<input type="text" autocomplete="none" onfocus="this.setAttribute('autocomplete', 'none');"/>
</form>
this is works if you want to keep white as your input background color
<input type="password" class="form-control" id="password" name="password" placeholder="Password" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">
use this solution
<input type="password" class="form-control auto-complete-off" id="password" name="password" autocomplete="new-password">
Chrome does not support autocomplete="off" at the form level for some input fields.
There are 2 solutions to do so:
In your form, if only two or three fields ignore autocomplete="off", then use the field name itself as the autocomplete value. i.e. autocomplete=
<form:input type="text" id="name" path="name" autocomplete="name"/>
Instead of defining field name manually for each field, use a script for all text typed input at the loading of the page or after.
if ($.browser.chrome) {
$(document).on('focus click tap', 'input', function() {
$(this).attr("autocomplete", 'block');
});
} else {
$(document).on('focus click tap', 'input', function() {
$(this).attr("autocomplete", 'off');
});
}
this solution is no longer working in chrome 95 and above,
Try using a normal input with type text, disable copy and pasting then add a style with property -webkit-text-security to add character mask on typing
#Not that this css property is not universal as mentionned here https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-text-security
This works:
$(document).ready(function () {
setTimeout(() => {
$('input').attr("readonly", 'readonly');
$('input').attr("onfocus", "this.removeAttribute('readonly')");
}, 100);
});
This works well and also compatible with MDL (Material Design Light):
// Fix chrome's ignore on autocomplete=off
$('input[autocomplete=off]').each(function(){
var copy = $(this).clone();
copy.val('');
copy.removeAttr('autocomplete');
copy.insertAfter($(this));
$(this).hide().removeAttr('required id class');
});
This is how I solved the problem.
$("body").on('focus',':input', function (e) {
$(this).attr('autocomplete', 'off');
$(this).attr('autocapitalize', 'off');
$(this).attr('autocorrect', 'off');
$(this).attr('spellcheck', 'false');
});
OR
<input type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">
Is it not possible to use password type where text type is required?Regardless of the method presented above, Chrome unconditionally handles autocomplete if the name is the same.
So, I used a method to randomly change the name like this.
$(document).on('focus click tap'
, 'input[autocomplete][autocomplete!=""]:not([data-oname][data-oname!=""])'
, function() {
var oname = $(this).attr('name');
var newName = "random string"; // random string
$(this).attr({"data-oname":oname,"name":newName,autocomplete:newName});
// A random string should be set for name and autocomplete above.
}).on('blur', 'input[data-oname][data-oname!=""]', function() {
var oname = $(this).attr('data-oname');
$(this).attr({"name":oname}).removeAttr('data-oname');
});
automcomplete="off" or automcomplete="false"
or Define autocomplete inside Input field
$('input[name="password"]').attr('autocomplete', 'off');//Disable cache
very simple, you can follow this
let elements = document.querySelectorAll('[autocomplete="off"]');
elements.forEach(element => {
element.setAttribute("readonly", "readonly");
element.style.backgroundColor = "inherit";
setTimeout(() => {
element.removeAttribute("readonly");
}, 500);
})
Use autocomplete="new-password" instead of autocomplete="off". This is a newer, more specific value for the autocomplete attribute, which indicates that the field is for a new password, rather than just any input. This can help prevent the browser from auto-filling the field with old passwords.