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
})
Related
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 =)
I am creating an Acrobat file with multiple pages. Each page has a map and a list of names down the side. Each name is a button and I have JavaScript entered for each, so that when you hover the mouse over the button, the corresponding name shows up at it's location on the map (via a text field), and then when you move your cursor away from the button, the text field disappears.
Here is the code I have for MouseEnter:
this.getField("Kyle Deal").display = display.visible;
Here is the code I have for MouseExit:
this.getField("Kyle Deal").display = display.hidden;
It works great if you stay on one page, but my problem is, is that when you hover the mouse over the button and the name appears and you move to a new page, and then come back, the text field is still there because the MouseExit never actually triggered when you were on the page the first time, no matter where your cursor is now. This happens way more often than it sounds like it might, pretty much every time someone uses this document at all.
Does anyone have an idea of how I can go about resolving this issue whether it be by a bit of JavaScript that clears all functions when you move to a new page, or maybe I can edit the MouseEnter function to go away after a certain period of time, or some other method inside Acrobat's settings?
One approach would need some field renaming (to make things easier). You would set all relevant fields to hidden when leaving the page.
Now with hierarchical field names, where the fields on page 2, for example, would have a name "p2.xxx", your command in the pageOut event would be
this.getField("p2").display = display.hidden ;
and that would do it.
Otherwise, you would have to hide field by field in the pageOut event.
I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.
I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.
I'm creating various input fields dynamically using prototype js. Everything looks nice and cool and the fields are appended properly in the right place.
The only problem is that the field's tabbing order is messed up ...
When inside a textfield pressing tab doesn't switch focus to the field immediately below it.
Instead it gives focus to inputs that existed before the new fields were dynamically added ...
Is there a clean and simple way to reset the field's tabbing order to the regular one, i.e. the one that would switch to the field immediately after in the DOM .
Note : this annoyance occured on Firefox 5.0. I didn't test it on other browsers yet.
You can manually set the tab index. The issue here is that the logical order of fields any given HTML does not always match the visual order of those fields in the browser. So writing a script to automate this may not always work.
According to W3C forms,
Those elements that assign a positive value to [tabindex] are navigated first
... Elements that have identical tabindex values should be navigated in the order they appear in the character stream.
So give all the dynamic fields the same value of 1 and they will be tabbed before any other field (which have an equivalent value of 0) in the order they are added to the document.
I'm building a nested form in rails 3.1 and instead of pressing the "add" button i want to automaticly add an input field when typing text in an empty input field (just like making a question in facebook and adding poll options). But i also want to only add a field if there are characters typed in the field if the characters are removed the extra field should also be removed.
I am working with rails 3.1 and so jQuery and jquery-rails are included in my gem, i don't know coffee script yet.
it's really easy.
Just tap into the focus() event handler and add textboxes as you go along.
I have created a simple demo for you here: http://jsfiddle.net/mcVnN/
Warning: clicking any textbox will add a new textbox here. If you want to add new textbox ONLY on last textbox focus, just compare the id.
If you have any doubts let me know.
Cheers
--
Sorry, did not read your full question, my mistake.
I have put together some quick code http://jsfiddle.net/mcVnN/12/ again on jsfiddle, but you might want to change it to suit your needs.
I was going through my answers a now and realized I had left you in the middle of nowhere.
Took some time to completely re-write my answer - the above answer is a lot buggier, you are better off using the :last selector than manually trying to keep track of the last text box yourself.
See my rewrite here: http://jsfiddle.net/mcVnN/29/
I have also added a max text box count that you can change easily to configure how many textbox you want users to be able to add.
Please replace the above code with this one, if you are using the above one at all.
Thanks.