I`m trying to implement a range slider with ng2-nouislider into a reactive form.
I want to give the opportunity to split the range from 1 to 100. Maybe three ranges and first is 20, second is 50 and the last is 30. All together it is 100. And the user should be able to add more ranges and to change them.
I have a reactive form in my project and it is not possible for me to change to a template driven one.
Here is my stackblitz for the ngmodel variant that works like I want:
https://stackblitz.com/edit/ng2-nouislider-with-form-8vbrt4?file=src/app/app.component.html
And here is the stackblitz for the reactive form variant:
https://stackblitz.com/edit/ng2-nouislider-with-form-g8zpq4?file=src/app/app.component.html
In this documentation it sais the nouislider component has to be destroyed to add new handles:
https://refreshless.com/nouislider/more/#section-update
But I tried it also without destroy via the destroy method of nouislider in the ngmodel variant and it worked also well. The destroy via the if condition seems to be enough.
My problem is in the reactive form variant. If you try this example and push the plus button, you can see, that the handle is added, but the forms value is not correct after the reinitialization of the slider in the dom.
The value seems to be only for a short time correct, and then the array loses the last value.
In other words. If the value is [33,66] and should be [25,50,75] after the button click, the value is only very short correct, and the it is only [25,50].
It seems that the slider is not really destroyed and remembers the old array length of the start value. And after reinitialization it overrides the form value again.
So please.....
Is anybody able to help me here? I can not see any error in my code here.
Thanks in advance =)
Related
I've been struggling with the docs of strapi for this.
There's a collection of articles. When creating an article, there are 2 fields i.e Start Date and End Date. Now when a value of Start Date changes and user is done selecting an event, I want to update the value of End Date 6 months from that.
Ofcourse the calculations of value are not a problem but I'm unable to find anything to update the value on blur event.
Right now, I'm using beforeCreate and beforeUpdate lifecycle hooks but all these hooks mentioned in strapi doc run when a user clicks Save button.
This might solve the case but this is not an idea scenario for a user coming from Wordpress or any other custom CMS where this is easily doable
Strapi is not providing any blur events for now . We have Posted Comments on the strapi forum untill then only way to fix this is by using life cycle events provided by strapi. Refer this link https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#lifecycle-hooks
Get Date and Time in Separate Fields .
Merge those values when clicking on save button .
https://forum.strapi.io/t/change-value-of-input-field-on-another-fields-blur-event-in-strapi/19829
Odoo 13.
I got two float fields: time_given and timer.
I have created a widget for 'timer' field. My widget works as real-time clock or some sort of timer. The problem I have encountered is that I want to change the style of 'time_given' field based on the following condition:
((time_given - timer) <= 30 sec) i.e less than 30 seconds left
To change the style of the field the widget attached to is pretty easy, but I am not sure hot to get access to other field elements in the form view I need and make some visual manipulations with them if needed.
I was able to get access to other field elements, change their style and add some text but the it is not a proper way.
this.__parentedParent.__parentedChildren
I get array of objects, then I loop through it and look for the field needed. After I found my target field element I am able to play with it.
For example:
$field_name.addClass('text-danger')
The way above works pretty fine but again as I said before, this is definitely not a proper way.
I was trying to find the right field element and add class to it by the following way:
$("[name='field_name']").addClass('text-danger')
It found the element, but did not add the class 'text-danger'.
I was trying my best by googling and reading the source code, but failed.
enter image description here
I have managed to solve this issue. Just used core.bus.trigger method mentioned in the official documentation.
P.s. In case if you are still interested how I did this in more details, just let me know in the comments section below.
I made an angular 2 model-driven form with nested fields. One of this fields is a numeric field and I am using a jquery plugin to make numeric formatted. I created a directive to init this plugin when a new line of input are added, but when I add a new line, a total must be divided to all lines, it's a quantity. This division I made in a function in my model to update the fields in the formGroup.
My problem is, the view shows the new value for each line, but, the plugin is formatting this field and the browser only shows the field formatted when I put the mouse cursor over. It seems that angular is not updating the view as it should.
Here are some images about whats happening:
First when the layer appears, the first field in the top is not showing formatted, but it's.
Here is how it shows after moving the mouse over:
I added some lines, see how they are shown:
And after moving the mouse over:
Ps: Don't tell me "you should not use jquery with angular blah blah blah...". I know this, but I needed to use it.
My best guess is the changes you're making is made outside Angular hence its change detection engine is not aware of the changes. One simple way to force this is using setTimeout
setTimeout(() => {
// Code that modify model values go here
})
I am trying to use Angular-Formly together with angular ui-select using $http for results.
The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.
When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.
I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.
Please see the following JSBin that reproduces the error :
http://jsbin.com/peducofaje/edit
I would appreciate help on this.
I have an early Christmas present for you. I've updated the ui-select example to have exactly what you want :-) A few notes on why yours didn't work:
expressionProperties only run when the formState or model changes which is an optimization to reduce the number of watchers (because all expressionProperties share a single watcher). The problem with this is, your model didn't get updated until after an option was selected, so yeah.
The template was using a group-By, but the templateOptions didn't have a groupBy. You could use a templateManipulator to dynamically add a group-by if one is present on the templateOptions, but my solution doesn't demonstrate this.
You weren't handling the case where the address search was empty
Also, checkout the note at the top:
// NOTE: This next line is highly recommended. Otherwise Chrome's autocomplete will appear over your options!
formlyConfig.extras.removeChromeAutoComplete = true;
I hope this is helpful!
I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.
First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.