Wednesday, 10 July 2019

Force change detection in pipe (pure or impure) bound to ngModel

I'm binding an ngModel value to the angular percent pipe, updating on ngModelChange with updateOn set to blur. It works well except when entering the same value again. When entering the same value again, the pipe does not detect the change and the value shows as a decimal instead of a percent. I have tried recreating the percent pipe as an impure pipe but this did not work. How can I force the pipe to detect the change even if the value is identical to previous value?

Tried having pipe return WrappedValue.wrap(this._latestValue);

Tried running this._ref.detectChanges() in change function

<input placeholder="Percentage" type="text" [ngModel]="account.percentage | percent: '1.0-2'"
                    (ngModelChange)="updateAssignments($event)" [ngModelOptions]="{updateOn:'blur'}"
                    class="ta-r" />

updateAssignments($event) {
        const cleanEvent = Number($event.replace(/[^\d.]/g, ''));
        account.percentage = (cleanEvent / 100);
}

Expecting value to be displayed formatted as a percent. Shows decimal value after reentering.

Stackblitz - https://stackblitz.com/edit/angular-6-material-starter-ru3ks1



from Force change detection in pipe (pure or impure) bound to ngModel

No comments:

Post a Comment