Angular validation after submit

Question

I have form fields that are validated using required. The problem is, that the error is displayed immediately when the form is rendered. I want it only to be displayed after the user submit.

My question is similar to this one.

but in my case, I have more than one buttom in the form, so I don't understand how to implement the ng-submit or a solution to my problem.

This is my Plunker of what I want to do.

HTML form:

  <form name="myForm">
    <table>
      <tr>
        <td>
          <input type="text" ng-model="oldName">
        </td>
        <td>
          <button ng-click="copyName()"> Copy >> </button>
        </td>
        <td>
          <input type="text" name="newName" ng-model="newName" required>
        </td>
      </tr>
       <tr>
        <td>
          <input type="text" ng-model="oldEmail">
        </td>
        <td>
          <button ng-click="copyEmail()"> Copy >> </button>
        </td>
        <td>
          <input type="email" name="newEmail" ng-model="newEmail">
        </td>
      </tr>
    </table>

    <br>
    <button ng-click="Submit()">Submit </button>

  </form>

Answer 1

You can simply put $scope.myForm.$setSubmitted() in your $scope.submit function which will set your form submitted. Now, in your error message's ng-show, you can have something like this:

<div ng-show="myForm.$submitted && myForm.newEmail.$invalid">
  <strong>invalid email </strong>
</div>

working plunker