jQWidgets Forums
jQuery UI Widgets › Forums › Angular › ngModel does not refresh the view
Tagged: ngModel model
This topic contains 9 replies, has 3 voices, and was last updated by Ivo Zhulev 8 years, 4 months ago.
-
Author
-
If I place two angularInput in a form, like:
<angularInput [(ngModel)]=”model.myProperty” ngDefaultControl></angularInput>
where model.myProperty is the same instance in both inputs, then, when I type in one of them, it goes in the model, but the other input linked to the same property is not refreshed. This used to work fine in angular1 and your libraries…
ok, I found the problem.
Peter, you are not implementing ControlValueAccessor on any of the angular2 components, and therefore the ngModel does not work properly. I have tweaked jqxInputComponent a little bit and now it works. I will send you my modifications to you by email.
Regards,
RubenHi lqbweb,
We will add it in the next realease.
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/I just saw your new release. My comments:
Overall, looks better, at least the ngModel now works. But there are things that I am not convinced about:
– I see you just went for removing the hook to the ngChanges and do setters for everything, this is not good IMHO, because you can not bind it to any angular expression. Why not implementing two ways binding that write to the jquery instance?
– The only two Input that you have declared are not correctly bound. I suspect that changing the width and height after having called to createWidget, will not be updated.
– you do not need to project anything, therefore you can remove <ng-content></ng-content> from the template.
– Yet, the <input> is not created by angular. Although, I see this a bit harder to fix with your current implementation.Regards
Hi lqbweb,
Thanks for the feedback. We will look into it.
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/I have realized about something:
https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html
OnChanges does not get fired if you just change the @Input() property, but only if that property is bound to another one, and you change the last one.
Instead, you need to implement your own change detector:
https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html
Therefore, I believe it makes a lot of sense to have fixed methods that act on the jquery instance that does not depend on the change detection as you have now with the latest update. But keep this in mind for your existing @Input() in other components.
Have a look at this plunkr:
Hi,
Could you explain me how you’ve implemented two-way data binding with an object as input?
I’m sending a certain object as input to a component. Within this component I create 3 different jqxInputComponents which all have to show one specific attribute of the input-object. However, the initial value of this input-object is never shown.
@Input() organisatieEntity : any;
<td><angularInput [(ngModel)]='organisatieEntity.naam' name="organisatieNaam" #organisatieNaamInput id="organisatieNaamInput"></angularInput></td>
Thanks in advance!
Kind regards,
Matthijs ToorenburgHi mattooren,
What do you mean by “jqxInputComponents all have to show one specific attribute of the input-object.”
Do you mean that the value of the jqxInput’s should become that object value or the jqxInput’s should show that value(in the input itself)?Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Hi,
I mean the second thing. All jqxInput’s should show a different attribute of the input-object.
Kind regards,
MatthijsHi mattooren,
Use the jqxInput
val
method for that.Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.