Comments (14)
As you can see above I have filed a PR with Angular to fix this issue properly. Let's see whether it gets accepted.
from ngrx-forms.
Okay, I can already confirm that removing the FormsModule
import and ngModel
from the custom form element indeed solves the issue.
from ngrx-forms.
NgSelectOption._setElementValue
is indeed called for each option after NgrxSelectOption.value
was called for the same element, thereby resetting the element's value. And reordering the imports so that NgrxForms
is imported after FormsModule
solves the issue. Not what I call a solid solution, but at least a good workaround ;-)
Edit: I already tried to create a reproduction, however didn't have enough information to reproduce this issue. With this new information I can try again and publish it.
from ngrx-forms.
That behavior is indeed a bug. I should have a fix ready soon.
from ngrx-forms.
I have just release version 2.1.2 which contains a bugfix for this issue. The ngOnInit
from the NgrxSelectMultipleOption
should now not mess with normal selects anymore.
from ngrx-forms.
Hi,
thanks for the quick reaction! Your fix indeed solved the issue that NgrxSelectMultipleOption
resets the options value. However, after that it seems that Angular's change detection does the same leading to the same issue:
This happens after ...
NgrxSelectViewAdapter.prototype.setViewValue (nativeElement.value = null)
NgrxSelectOption.prototype.value (nativeElement.value = "0")
NgrxSelectViewAdapter.prototype.setViewValue (nativeElement.value = "0")
Basically, it's the same issue as before with the difference that this time it's the change detection that's resetting the option's value. :-/
BTW, ChangeDetection is not set to OnPush and the options are currently set statically as described in my original post.
Just out of curiosity, why is this mechanism of changing the option's value to an index even used? Why not use the values directly?
from ngrx-forms.
Sorry, in my hurry to fix this bug I only solved half of what you posted in your original post. I'll work on another fix, but that will probably have to wait until the weekend.
In regards to why the mapping is needed: raw HTML options only allow strings as values. Therefore, to support non-string values I had to come up with a different solution. Instead of storing the value directly in the option in HTML I store its ID and access the value through that. Angular solved this differently by introducing ngValue
for non-string values. I thought I had found a better solution but maybe it simply doesn't work. However, I still hope that I can make my solution work correctly in all scenarios.
from ngrx-forms.
@luchsamapparat I had a look at my and Angular's code and there shouldn't be any reason why the change detection would directly change the option
element's value (the change detection will never touch any HTML elements directly, only though components and directives).
However, I have a theory. Do you by chance still import the @angular/forms
ReactiveFormsModule
? That one also has a directive that is unconditionally applied to all option
elements (I originally copied the code from there for my implementation before switching to the different approach). As you can see in the code here it also binds the value
attribute and again unconditionally sets the element's value. This would explain what you see.
Assuming that this theory is correct I am still not sure how to solve this. Obviously if you are not using reactive forms you could just remove the import. But some people are using a combination of both. Maybe the order of imports matters, i.e. if you import the ngrx-forms module after reactive forms it's directives might be applied later causing everything to work again.
If my theory is not right I am a bit at a loss. Can you please debug again and step into the property assignment operation that is highlighted in your screenshot? I expect that the assignment is actually calling a setter property so there might be some more logic in there.
from ngrx-forms.
Hi @MrWolfZ,
thanks for spending your weekend to look into this. I was wondering why this issue appeared all of a sudden but didn't have the time to go through all the changes of the last weeks to determine the change that caused this issue in our application. However, your theory reminded me, that we indeed added an import not for ReactiveFormsModule
but FormsModule
from @angular/forms
.
We needed a form control for date/time values and for that we created a custom form element, that combines a datepicker and timerpicker. This datetime component internally uses ngModel
and ngModelChange
to retrieve the values of the input elements and then propagates a combined value via the ControlValueAccessor
interface in order to use it with ngrx-forms.
I'll debug the application, check your theory and will report my results in an hour.
Best regards,
Marvin
from ngrx-forms.
Glad to hear that we found a workaround at least. However, I fear that the only proper solution is a pull request to @angular/forms
to change the way their option
code works. IMO if the option
cannot be associated with a select
(which they are already checking) the code shouldn't do anything at all, i.e. not change the HTML element's value. Maybe some other idea will come to my mind over the next few days, but for now I have nothing.
from ngrx-forms.
I see. If something comes to mind and you want to try, I created a reproduction where you can test the issue: https://github.com/luchsamapparat/ngrx-select-bug
Thanks again for helping with the issue. If you ever come to Hamburg, contact me and I'll buy you a beer. :-)
from ngrx-forms.
Thanks for the reproduction repo. I'll use it to verify whatever solution I come up with. I'll leave this issue open to track it.
Haven't been in Hamburg in ages (I'm from Berlin), but if I ever am I'll take you up on that offer :)
from ngrx-forms.
:( no movement at all on that Angular PR. Doesn't seem like this will be fixed after all. At least you have a workaround. I'll add a note about this issue in the FAQ I am going to write. For now I'll close this issue.
from ngrx-forms.
@MrWolfZ It seems the Angular team finally replied. Better late than never 😛
They find the change valid. But at this point it's so far from master Angular branch that they need the PR to be rebased. Any chance this can be done? If not, I could at least try to resend your PR, branching from latest develop branch so they can merge it (keyword: try. I've never contributed to such a huge project like Angular is)
from ngrx-forms.
Related Issues (20)
- Sure, just replace the players update with something like this:
- `NgrxFormControlDirective`: Update view when `ngrxValueConverter` changes HOT 1
- Pattern: Supply different "feature state" into the form reducer? HOT 1
- mat-radio checked not working? HOT 1
- Type inference is incorrect with readonly[]
- Question: Bind server-side validation to ngrx-forms forms
- [QUESTION] - Validation of a nested formState HOT 1
- Primitive unions are not supported
- Add compatibility with typescript 4.8 HOT 1
- New Angular Version 15 with breaking changes on Material to mat-list-options HOT 3
- No valid view adapter for Slider with Angular Material 15
- FormArrayState, the state doesn't update when SetValueActions are disptached
- Add compatibility with Typescript 5
- material 15+ (MCD based components) compatibility HOT 1
- Angular 16 support HOT 4
- Enable/Disable nested array properties HOT 3
- Programmatically Triggering Async Validation HOT 3
- Add sortArray function HOT 4
- Control validation order, run async after synchronous complete without error
- Question: Update parent form state based on child control states
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.