Angular Validation NG-message dont show required after submit and erase text

Question

This is my current validation set up for my form

<ng-messages for="searchForm.$error" ng-if="searchForm.$submitted">
  <ng-message when="required" class="error-message">This search field is required.</ng-message>
</ng-messages>

and my form

<form role="form" ng-submit="searchForm.$valid && searchcode()" name="searchForm" novalidate>

It works fine.

But here is what I don't like this scenario

1) Hit Enter on empty searchbox - > it shows the correct message "Field Is Required"

2) Start Typing and Erase Text without hitting enter - > it shows error message again

It's the second scenario I dont want...any ideas ?

Answer 1

Maybe your field name for the error message is not right. Cannot tell the exact reason why yours not work because you did not provide an example. However, when I tested, it works fine.

 <form ng-controller="MyCtrl" role="form" name="searchForm" novalidate
    ng-submit="searchcode()">
    <input type="text" ng-model="field" name="myField" 
      ng-keypress="searchForm.$submitted=false"
      required minlength="5" />
    <ng-messages ng-if="searchForm.$submitted"
      for="searchForm.myField.$error">
      <ng-message when="required" class="error-message">
        This search field is required.
      </ng-message>
    </ng-messages>
  </form>

http://plnkr.co/edit/56koY7YxPDVFe4S26x9N?p=preview