How to reset the angular scope variable when the Html tag gets executed?

Hy, I have a variable bound to my scope,

$scope.isSuccess = {
       invalidPhone : false
}

And I am using a span to display a message when the variable gets true …

<form name = "myForm">
    <span ng-if="isSuccess.invalidPhone && myForm.$submitted">
          Please enter valid phone no.
    </span>
</form>

Now I am calling a Js method when the form gets submitted..which validates the phone number and set

$scope.isSuccess.invalidPhone = true 

Only if it is incorrect.

Now I want to reset the value of this variable to false when my span gets executed. How to do it ? Thank you

Answer

Use the ng-change directive to update status of the flag:

<form name = "myForm">
    <input name="phoneNumber" ng-model="data.num" type="text" 
           ng-change="updateStatus(data.num)" /> 
    <span ng-if="isSuccess.invalidPhone && myForm.$submitted">
          Please enter valid phone no.
    </span>
</form>

Every time the user changes the phone number, the function will be called:

$scope.updateStatus = function(num) {
    //Check phone number here
});

For more information, see

Leave a Reply

Your email address will not be published. Required fields are marked *