0
324
VisualizaçõesAngular not detecting change inside a duration picker when time is selected using its controls
I am having an html duration picker inside my code like below. I can either type in the time or change the time by clicking the up/down arrows.
I am binding its value to a variable using ngModel
<input type="text" id="mTime" [class] = "'html-duration-picker'" [(ngModel)]="manufacturingTime">
I also have another text field which shows the result of the time duration divided by another value. So, when the time duration is changed, this field needs to be updated on the fly.
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="(manufacturingTime/numberOfWorkers)">
All these functionalities were working fine. Recently, I moved from angular version 11 to V 13. Since then,when the time is changed by clicking the up/down arrows, it is not updating the ngModel, whereas if the time is typed in, the ngModel is updated. I tried adding code on (change), (ngChange), also tried using changeDetection. But it seems, angular doesn't recognize the value change when it is done using up/down arrows. So these events are not fired. I can access the duration using ViewChild to save the duration to database. But the second textbox which shows the divided value cannot be updated on the fly. Can someone suggest a way to fix this?
The duration picker is a third party tool developed in Javascript. https://nadchif.github.io/html-duration-picker.js/ So I cannot control the events on arrow clicks.
2 Respostas
Responde à pergunta0
I suspect that this may work, as it could cause the expression to be evaluated more often.
- In your component class, add a getter that calculates the divided value like so:
public get dividedValue(): number {
return this.manufacturingTime / this.numberOfWorkers;
}
- Then assign that value to the second input:
<input name="assemblyTime" class="form-control right" [disabled] = true [ngModel]="dividedValue">
Again, this is just a wild guess, because I have no code to run. If you provide a runnable Stackblitz example, I would be happy to help you debug it.
0
If you take a look at the html-duration-picker code, in the function definition for changing values using arrow keys changeValueByArrowKeys; the last line:
insertFormatted(inputBox, constrainedValue, false);
has third argument false which is passed to the function insertFormatted. This function insertFormatted creates the (change) or (input) events.
In the above image you can see that any event be it (change) or (input) is only triggered if the dispatchSynethicEvents is not equal to false.
To handle this you can create a fork the library, make changes to it, store a local copy and use that instead of the library. Alternatively you could raise a PR and ask the author to consider your change.
To solve it you need to basically remove that if condition. It will then emit (input) event no matter what.