Displaying messages during Angular validation?

Question

Angular

There is this form:

<form name="contactUsForm" class="form-horizontal" ng-submit="vm.confirmForm()">
        <div class="form-group">
            <span class="col-md-1 col-md-offset-1 text-center">
              <i class="fa fa-envelope-o bigicon"></i>
            </span>
            <div class="col-md-8">
              <input
                id="email"
                name="userEmail"
                type="email"
                ng-model="user.email"
                ng-minlength="4"
                ng-maxlength="20"
                 	placeholder="Email Address"
                class="form-control"
                required>
              <p ng-show="contactUsForm.userEmail.$error.maxlength">Your email is too long.</p>
              <p ng-show="contactUsForm.userEmail.$error.email">Your email is not valid.</p>
            </div>
        </div>
      </form>
        <div class="form-group">
          <div class="col-md-12 text-center">
            <button type="submit" class="btn btn-primary btn-lg" ng-submit="vm.confirmForm()">Submit</button>
          </div>
        </div>

Everything works here, but how to make it so that the short/long password messages are displayed only after clicking on the submit?

Answer 1

ng-show="contactUsForm.userEmail.$error.maxlength && contactUsForm.$submited"

Forms and fields have many interesting properties.
$submited is fine for you.
Other properties can be found here: https://docs.angularjs.org/api/ng/type/form.FormCo...