0

I have a textbox and a submit button. When the user clicks the submit button, my javascript does some checks to make sure that the input is "valid" and, then ideally would show an error message if the input is invalid.

In my HTML I have a p tag that I want to show up when my variable vm.showError is set to true, and I want it to display the value of my variable vm.errorMsg:

<p ng-hide="!vm.showError">{{vm.errorMsg}}</p>

Inside my AngularJS controller I have the following code:

var valid = validateTextbox();

validateTextbox() returns a promise, whose value is an object that looks like this:

{
  valid: boolean,
  errorMsg: string
}

and then directly afterwards, I have the following:

valid.then(response => {
    if (!response.valid) {
        vm.showError = true;
        vm.errorMsg = response.errorMsg;
    } else {
        vm.showError = false;
        //call some other function that does stuff with the input
     }
});

I am wondering how can I actually ensure the error message shows up on time, due to the ng-hide value being set in a .then()? At the moment the error message shows up after I type another character into the textbox (I assume due to a rerender)

MrBabalafe
  • 120
  • 1
  • 1
  • 7
  • This part: _At the moment the error message shows up after I type another character into the textbox_ doesn't square with this part: _When the user clicks the submit button, my javascript does some checks_ -- at which point is the validation occuring? On submit click or on input? – Kinglish Feb 04 '22 at 20:57
  • Validation occurs on submit. So basically I click submit -> function checks if text is valid, and returns the object in a promise. – MrBabalafe Feb 04 '22 at 21:05
  • it might be that you have this problem: https://stackoverflow.com/a/29817217/3533455 – fwiw Feb 05 '22 at 10:45

0 Answers0