In Angular 5, updated textbox value has not been taken in (ngModelChange). I have one text box which is used to enter the shipping cost, whenever the model is changed, I need to add with total cost and need to be displayed. Here, always take previous value instead of current entering value.
For example, previous it has 5, now, I am adding to 51, ngModel takes 5 only instead of 51 during the ngModelChange.
<TextField row="1" col="1" (ngModelChange)="sumOfRestocking();" [(ngModel)]="shippingFee" ></TextField>
sumOfRestocking () {
console.log('shipping fee-->' + this.shippingFee);
// Takes only previous record, so I am not able to update the total correctly.
}
Anyone help me, why it takes previous value only instead of taking current value.
Pass the changes in to the function call
<TextField row="1" col="1" (ngModelChange)="sumOfRestocking($event);" [(ngModel)]="shippingFee" ></TextField>
sumOfRestocking (changes) {
console.log('shipping fee-->' + changes);
}
ngModelChange fires as the model is changing, you can also use change for an up to date model but will fire on blur not keyup. You could use (keyup) as that will fire after the model has updated.
<TextField row="1" col="1" (change)="sumOfRestocking();" [(ngModel)]="shippingFee" ></TextField>
sumOfRestocking () {
console.log('shipping fee-->' + this.shippingFee);
}
Related
I'm using a v-text-field with an input handler that prevents entering too high of a value. E.g. max quantity is 50, so my handler will set the quantity to 50 if user enters 98 or if they enter a non numeric value. However the handler will only do so once. After that, the value technically remains 50, but the field will show the user's input.
It doesn't seem to be an issue if I use the native html , anyone know how to deal with this in Vuetify? I've added a link to the sandbox below:
https://codesandbox.io/s/v-text-field-issue-w43sx?file=/src/App.vue
You should use #change instead of #input. Input fires once you starts typing. Change will be watching for any changes.
And in check parseInt. Vuetify automatically renders model text as a string. In start 0 will be "0".
<v-text-field
v-model="quantity"
label="Quantity"
#change="preventOverflow"
/>
preventOverflow() {
if (parseInt(this.quantity) > 20) {
this.quantity = 20;
}
},
I'm trying to find a way to make the slider component from the #react-native-community/slider change it's maximumValue after it was initialized. I can't preset a maximum value since I want to allow my users to decide that value.
<Slider
onValueChange={changeSliderTitle}
step={this.state.value}
minimumValue={1}
maximumValue={this.state.value}
/>
Any help is much appreciated!
You can change the maximumValue after it has been initialized.
There are a few issues with your current code:
<Slider
onValueChange={changeSliderTitle}
step={this.state.value}
minimumValue={1}
maximumValue={this.state.value}
/>
You probably want step to be a fixed value. It determines on what increments you can move the slider by.
maximumValue can be a value from the sate, but it should be separate from the slider value.
A fixed version of the slider could look like this.
<Slider
onValueChange={(value) => {this.setState({value})}}
value={this.state.value}
step={1}
minimumValue={1}
maximumValue={this.state.maxValue}
/>
Now, you can call the following in your code to set the maximum value of the slider dynamically.
this.setState({maxValue: 1000})
What I am trying to do is detect, using onChange, if a dojo horizontal slider is being dragged right to left. This happens to be in IBM XPages, but the area of CSJS code below should be universal. How do I use the _isReversed property to get true/false?
<xe:djHorizontalSlider
style="margin-left:5px;width:200px;height:20px"
id="djHorizontalSlider1" showButtons="false"
defaultValue="1" maximum="15" minimum="1"
intermediateChanges="true"
discreteValues="8" value="#{viewScope.sliderNumber1}">
<xe:this.converter>
<xp:convertNumber integerOnly="true"
type="number">
</xp:convertNumber>
</xe:this.converter>
<xp:eventHandler event="onChange" submit="false">
<xe:this.script><![CDATA[
//I WANT TO DETECT IN THIS CSJS
//IF THE SLIDER WAS DRAGGED RIGHT TO LEFT
}]]></xe:this.script>
</xe:djHorizontalSlider>
When the onChange event happens the widget already changed its internal values making it almost impossible to detect any change here. But I wrote a small workaround to detect if the slider was moved from right tot left.
You should place this code inside your onChange handler. What it does is saving the current value in a data attribute on the widget itself. When another change occurs it will be checked against the new value and updated with the new value. This way you can compare the previous value (could also be the starting value) against the new value.
Hope this works for you!
// find dojo widget
var w = dijit.byId("#{id:djHorizontalSlider1}");
// get previous value from attribute (or default value)
var previousValue = dojo.attr(w.domNode,"data-prev-value") || w.params.value;
// log info about current and previous value
console.log("new value=" + thisEvent);
console.log("previous value=" + previousValue);
//save new value
dojo.attr(w.domNode,"data-prev-value",thisEvent);
// check value
if(parseInt(thisEvent) < parseInt(previousValue)){
alert("Detected slide right to left! new value="+thisEvent+", old value="+previousValue);
}
I'm creating my own autocomplete feature based on vue.js and materializecss.
https://jsfiddle.net/guanzo/kykubquh/5/
Right now it's working okay, except for a few things.
The normal behavior for an autocomplete is that once you select an item by pressing enter, or clicking, the value of the input becomes your selected item. So if you input "alab", and select the item "Alabama", the value of the input should become "Alabama", and the dropdown list disappears.
The problem is that the input is bound with v-model="query", meaning the value of the input is the value of "query", which is the value of the input.
Trying to change the input value with this.$el.querySelector('input').value = "Alabama" does nothing. My current workaround is to set the value of query to be the value of the selected state.
onSelect(state){
this.selected = state;
this.query = state.name//replace input val
}
A nasty side effect of this is that changing the value of query triggers another search, which causes the dropdown to reappear with the item "Alabama".
How do i change the value of an input that has been bound with v-model?
My attempted workaround is to call this.onBlurInput(); after the user selects an item, which hides the dropdown. However, the dropdown will no longer appear until you explicity refocus the input by clicking outside and back again.
Remove your focus and blur events and add the following line to your queryMatches. You really only want to show options when there is not an exact match.
queryMatches(){
if(this.query.length <= 1){
return [];
}
// check to see if the current value is already in the list
if (this.query === this.selected.name) return [];
console.log(this.query)
var reg = new RegExp(this.query,'gi')
var matches = this.states.filter(state=>{
return reg.test(state.name)
})
console.log(matches)
return matches
}
Here is an updated fiddle.
i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.
So here's the code :
//When the last fieldset show
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick='';
next.type="submit";
next.value="Submit";
next.id='submit';
}
Is there something that i should add to stop the submit auto-firing ?
I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.
var next = document.getElementById("next");
//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';
<form>
<input name="q" value="hello">
<input type="text" id="next">
</form>
I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.
It can be something like this:
//When the last fieldset show
if (fieldset[4].className == "active") {
// hide the next button
document.getElementById('next').style.display='none';
// show the submit button
document.getElementById('submit-button').style.display='';
}
And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.
There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:
You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.
Why not just add an event to submit the form you are currently on:
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick=(function() { document.forms[0].submit(); });
//next.type="submit";
next.value="Submit";
next.className="MySubmit"; // try to style it as a button for better UX
//next.id='submit';
}