Question:

Force input field to return to former correct value on wrong input

Query: How to Force the input field to return to the former correct value on wrong input in Angular

Problem

My app.component.html goes like this:

Type a number below. If it is negative it will be rejected

and my app.component.test goes like this:

export class AppComponent {

myValue: number = 7

handleValueChange(event: any) {

const newProposedValue = event.target.value

if (newProposedValue >= 0) {

this.myValue = newProposedValue

}

If I launch the app, type 5 in the field, hit enter, type -3 in the field, hit enter, I would like the field's content to return to 5, the former correct value.

How do I achieve this? I tried adding else { this.myValue = this.myValue} after the if to simulate a change and force a reloading of the view but that doesn't work.

Solution

Ok to use another state to maintain the previous successful input? Not tailored to Angular, so you'll have to modify it as needed...

export class AppComponent {

myCurrentValue: number = 0;

myPreviousSuccessValue: number = 1; // or whatever start value you want

handleValueChange(event: any) {

this.myCurrentValue = event.target.value;

}

handleOnSubmit(e) {

e.preventDefault();

if (this.myCurrentValue > 0) {

this.myPreviousSuccessValue = this.myCurrentValue;