AngularJs Ng-Keypress event working wrongly? - javascript

I am developing an application in Angularjs. I am using ng-keypress event in input type=text. While typing value in text I'm getting wrong values in the keypress function. For example, the first time if I type "1" I am getting undefined. Second time, typing any other value gives the first value
<input ng-model="NodeId_1" type="text" ng-keypress="getValue()"/>
var angularapp = angular.module('nameapp', []);
angularapp.controller('NameCtrl', function ($scope) {
$scope.getValue = function () {
alert($scope.NodeId_1);//Here first time undefined is coming and second what ever we enter first value will come
}
}
)

You'll want to use ng-keyup instead.
ng-keypress happens as the key is pressed, and BEFORE the value populates the input. This is why you're not getting any value on the first keypress, but on subsequent presses you will.
Use ng-keyup and your problem is solved, as it happens once the value has already populated the input.
<input ng-model="NodeId_1" type="text" ng-keyup="getValue()" />
ng-keypress is working as intended, but it is not the directive applicable to your requirements.
Working plunkr: http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

The keypress event is fired when a key is pressed down and that key
normally produces a character value (use input instead).
https://developer.mozilla.org/en-US/docs/Web/Events/keypress
So neither the input field value nor the scope value(apply/digest loop etc.) will reflect the expected input value.
Solution is depending on your requirements. Here are some:
1) Use another event on the inputfield: change, keyup, ...
2) Use the $event object in your listener method:
<input ng-model="NodeId_1" type="text" ng-keypress="getValue($event)"/>
$scope.getValue = function (event) {
console.log(event)
}
3) Create a watcher for your NodeId_1 value within your scope:
$scope.$watch('NodeId_1', function(newVal) {
...
});

The watcher function work for me, I attached my example
$scope.$watch('itemm.montoAmodificar', function (newValue) {
$scope.fnActualizarNuevoSaldoDependencia(parseFloat(newValue));
});
The html code is the following
<input ng-model="itemm.montoAmodificar" my-focus class="form-control" type="text" placeholder="Ingrese el monto" ng-keypress="fnActualizarNuevoSaldoDependencia($event);" />

Related

Javascript "input" event value is undefined

I have an Electron app that needs to monitor an input text field on a form. The HTML looks like this:
<input type="text" class="cloneProjectName" id="outputProjectName" value="" >
I add an event listener for the element and console log what I think should be the typed data from the input:
projectNameControl.addEventListener("input", function (event) {
console.log(event.value)
})
All I see in the console is "undefined."
I would appreciate any input, I have searched and searched without finding an answer.
Sid
It's not the value of the event that you want (events don't have a value). It's the value of the element that triggered the event that you want and that element can be referenced with this or event.target.
Also, make sure that your JavaScript projectNameControl variable correctly references the input.
let projectNameControl = document.getElementById("outputProjectName");
projectNameControl.addEventListener("input", function (event) {
console.log(this.value, event.target.value);
})
<input type="text" class="cloneProjectName" id="outputProjectName" value="" >

why get function call multiple times in angular?

I make a simple demo user login screen .I am facing one issue that get property function call multiple times (4 times).
Step to reproduce
Enter 10 digit number or email example test#gmail.com
Click continue button it show password screen.
click on change email or mobile no and see the console log it call four (4) times
here is my code
is there my implementation is wrong ?
here is my code
https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html
get userenterValue() {
console.log('log==')
return this.userInfo.username;
}
set userenterValue(val) {
this.userInfo.username = val;
}
That is expected, since you are using ngModel with set , whenever there is a change input value there will be a console.log entry.
The value bound on the html has to be evaluated every time something "has changed" in the app so that if the value of the bound item has changed it will be reflected to the html
Instead you could use ngBlur to get the value when the focus is left.
Instead of binding it using getters and setters. How about you try binding with the property itself like:
<input type="text" name="email"
autocomplete="off"
placeholder="Enter the Email or Number"
[(ngModel)]="userInfo.username"
required
[disabled]="showPasswordField"
pattern="^(\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$">

Javascript - Display input inside div

So this is probably an easy one, but I'm just not doing it right. My goal is to send the user input from this textbox:
<input type='text' placeholder='Form Name...' id='formNameInput' required>
Into this Div:
<div id="code_output"></div>
I'm trying to make it appear in real time, and so far I used this to try and do so, but it doesn't work:
document.getElementById("code_output").innerHTML += document.getElementById("formNameInput").value;
Why doesn't it show? Does my code need something to trigger the Javascript?
You're close, but the issue is that you're not using an event handler. The script is executing your code once, as soon as possible (before you have the chance to enter anything into the text input). So, you have to add some sort of event listener so that the copying happens at the appropriate time. Something like below:
document.getElementById('formNameInput').addEventListener('keyup', copyToDiv);
function copyToDiv() {
document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}
<input type='text' placeholder='Form Name...' id='formNameInput' required>
<div id="code_output"></div>
You need to do that whenever the value of formNameInput changes. For that you need an event.
Your code should look like:
document.getElementById("formNameInput").addEventListener('input', function () {
document.getElementById("code_output").innerHTML += this.value;
});
function change() {
document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}
document.getElementById('formNameInput').onkeyup = change
maybe this is what you are trying?
You need to attach an event listener to your input that executes a function any time an input event occurs on the field:
formNameInput.addEventListener('input', function(e) {
code_output.textContent = e.target.value
})
<input type="text" placeholder="Form Name..." id="formNameInput" required />
<div id="code_output"></div>
Please note that the above code takes advantage of the fact that browsers automatically create a global variable for each element with a unique id attribute value, and this variable has the same name as the value of the id.
If the concept of events is new to you, this might be a good place to get started:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

eonasdan datetimepicker, on change event triggered on page load

I am trying to add ng-change to input which runs datetimepicker but it triggers on change function on page load. below is the code
<input datetimepicker ng-model="startDate"
ng-change="testFunction()"
options="cOptions"
placeholder="Select Date"/>
any idea how to prevent this ?
edit:
$scope.testFunction = testFunction;
function testFunction(){
console.log('on change')
}
loadData();
function loadData(){
//this is where startDate is set
}
Hi the change in input field where you're using the directive is triggered by the plugin, it's explicitly setting it to null. So you can have the validation like until input field in filled don't execute logic you written on ng-change function. There're two ways to do that:
<div class="input-group">
<input class="form-control" datetimepicker ng-model="vm.date" options="vm.options"
ng-change="vm.date && vm.changed()"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">
</span></span>
</div>
Now here ng-change will not trigger until something you inserted in the field. So onload it'll not triggered.
Other way is like instead of anding this scope variable with its ng-change function, you can check in that function if the value is null or not. If it's non-null then only run the implementation written on ng-change.
Here's plunker showing both conditions:
http://plnkr.co/edit/uCf2vpmoYIYzxTjmFVcX?p=preview
Update: If you're editing value onload but still you don't want to execute implementation you written on ng-change then have separate variable, toggle its value on first ng-change, which's triggering automatically because of directive, next change onwards your ng-change function will run.
http://plnkr.co/edit/FogYzmDBd1gIolvjP7yl?p=preview

The trouble with $scope

I have an input file element within an angular view/form. I'm using ng-upload like this:
<input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)">
<input id="imgname" type="hidden" value=""></div>
Since I can't tell angular to listen for changes on input[type="file"] element, I've created the method that updates the hidden input that just holds the current filename. That way I can run my validator on the second field.
Another field I have has some sort of validator, like this:
<input ng-model="other" ng-change="chg()"/>
Now, the trouble is, if I trigger the validator, $scope.chg(), from setFile() method, I think I don't get the same scope - chg() runs, but it's as if the validator is in another scope and doesn't set my actual submit button to enabled. I tried logging from the chg() - it shows different scope then what I actually see on the view.
And if I later trigger the ng-change by changing the regular input field ("other"), it picks up the changes, or actually, it sets the submit button state correctly.
Now, I suspect this has to do with me calling the angular.element(this).scope().setFile(this) from my form instead of direct, $scope-bound method. But I cannot call $scope-bound method because it does not trigger - if I understood correctly, that's due to Angular not (yet) working with input type=file fields.
What can I do here?
I simply want to detect if there is a file or not so I can enable/disable the submit button appropriately.
I used followed flow that works for me:
<input type="file"
ng-model="upFile"
onchange="angular.element(this).scope().setFileEventListener(this)"
/>
From controller:
$scope.setFileEventListener = function(element) {
$scope.uploadedFile = element.files[0];
if ($scope.uploadedFile) {
$scope.$apply(function() {
$scope.upload_button_state = true;
});
}
}
Hope it will help.

Categories