I'm facing an issue with a component that is supposed to react to changes in input controls by reformatting the input and removing certain characters. If the removed character corresponds to the previous value, the component fails to detect any change and does not update. This results in the removed character staying in the input box along with the new value.
Is there a way to ensure that an input box bound via [(ngModel)] to a backing field updates itself to reflect the value returned by the get prop() method?
export class RowConfig {
constructor(public amount = 0, ...) { }
get rendition() {
let output = "";
if (this.amount !== null && this.amount !== undefined)
output = ("" + this.amount)
.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ");
return output;
}
set rendition(input: string) {
const negative = input.match(/^[-]/);
const digits = input.replace(/\D/g, "");
let output = null;
if (digits)
output = +digits * (negative ? -1 : 1);
this.amount = output;
}
}
The binding is implemented as follows.
<input #amount type="text"
(keyup)="onKeyUp($event)"
[(ngModel)]="config.rendition">
I have attempted to trigger change detection in the onKeyUp method using markForCheck() and detectChanges() as suggested in the documentation, but it did not yield any results.
Is there a way to force the input box to clear its current content and update it with the value from the bound property?
(You can try out a demo of this issue on Blitzy.)