Angular - Only validate textbox on submit

Question

Is there an ng-show expression I can use to only validate this textbox only when the submit button is clicked? Currently, it's displaying the error message while the user is typing into it.

<div ng-show="!vm.validEmployerCode && !form.EmployerCode.$error.required" class="errorMessage">
            You have entered an invalid code
</div>

    <div class="row">
        <div class="col-xs-11">
            <div class="form-group">
                <label class="form-label" for="Code">Code</label>
                <input ng-model="vm.code" name="Code" type="text" required id="Code" />
            </div>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="submit" class="btn btn-success col-md-4">
                Sign Up
            </button>
        </div>
    </div>

Pankaj Parkar · Accepted Answer · 2015-12-15 20:09:05Z

2

You could check $submitted flag inside your form object, basically that will become a true once you submit the form. So you need to add form.$submitted inside ng-show directive.

Markup

<div ng-show="form.$submitted && !vm.validEmployerCode && !form.EmployerCode.$error.required" 
   class="errorMessage">
     You have entered an invalid code
</div>

answered Dec 15, 2015 at 20:09

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

noclist Over a year ago

Is there any way to supress the error message after the user attempts to submit, gets the error and then enters new input? I would like the message to be hidden while they're typing and fixing the data.

Collectives™ on Stack Overflow

Angular - Only validate textbox on submit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related