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>

We are going to need to see some code of what you have already tried. It's too hard to help without seeing what you already have. — tier1
– tier1, Commented Mar 30, 2017 at 15:11
The plunkr link is helpful, but the relevant code should be included directly in the post, as well. — Michael L.
– Michael L., Commented Mar 30, 2017 at 15:47
yes, the html is only a preview of the plunker, the plunker has the code. The div that has the ng-show and says "invalid email" I need to show that only when click in the submit button. — MarcosF8
– MarcosF8, Commented Mar 30, 2017 at 22:59

tanmay · Accepted Answer · 2017-03-30 15:15:53Z

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

answered Mar 30, 2017 at 15:15

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

7 Comments

MarcosF8 Over a year ago

Thanks for that. Sorry I didn't understand well your solution, but the error summary, so the div shows Invalida email get triggered inmediatelly when while writting a wronge email without wait for the submit click.

tanmay Over a year ago

@MarcosF8 do you have API call to make on submit?

MarcosF8 Over a year ago

no, I don't. When submit it will save the info in the Db doing and http call to my controller, so it goes to the MVC controller.

MarcosF8 Over a year ago

I am thinking in change the Copy buttons for links so I have only one submit buttons and try to use the Ng-submit.

tanmay Over a year ago

@MarcosF8 so in success callback of http call, you can just have $scope.myForm.$setPristine() which will reset your form controller, and myForm.$submitted will no longer be true until you submit again.

|

Collectives™ on Stack Overflow

Angular validation after submit

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related