I'm tying to understand how to properly build the RxJS based Store approach for handling states in my Angular application. Perhaps I'm missing something very simple.
The example is as follows:
- I have Reactive Form bind to UI elements, where one of them is <input type="number"/>;
- I subscribe to myForm.valueChangesand update my store when changes occur;
- The store does some work under the hood, maybe calls server API, and finally updates its state;
- In the component, I subscribe to the state updates and do myForm.patchValue(val, { emitEvent: false}).
Here is the example: https://stackblitz.com/edit/angular-ivy-qsn6yu?file=src%2Fapp%2Fapp.component.ts
So far this schema works fine, except for the number inputs.
The problem is that I can't input numbers such as 0.01.
I understand what is happening and why:
- user enters 0.;
- the form emits change event with value 0(because the input hastype="number");
- the store does its job and updates state to 0;
- finally form value is patched to 0(effectively removing decimal sign or any trailing zeros).
But I would like to understand how such cases are addressed in real-world application (e.g. in bookkeeping where almost all fields are numbers).
Some ideas I considered so far:
- use input type="text"and pattern based validation, but then on mobiles devices full keyboard is shown (instead of numeric);
- use constructions such as .pipe(distinctUntilChanged(...))and fire store updates only when "real" numeric changes are done, but it does not work when user wants to correct0.01to0.02by deleting last digit;
- implement custom logic for numeric fields and keep two values (the number and the visual representation of it), but then the benefit of reactive forms fades out;
I'm sure there is well known solution for such simple use case, but I was not able to properly formulate the query to the Google. :)
Thanks!
P.S. Updating store on button click / form submit is not an option as I'm working on auto-save feature for my forms.
