检测HTML表单提交

Question

I've got a generic form below that has a button and that button will post to a database, what the button does isn't really what this question is about, the question is about detecting an html form submit in angular.

<div class="example" ng-controller="ExampleController as app">
   <h1>Button below Form appears when fields full</h1>
   <form method="post" action="do_button_stuff"><TABLE BORDER="1">
     <TR><TD>Your name</TD>
     <TD><INPUT TYPE="TEXT" NAME="name" SIZE="20"></TD></TR>
     <TR><TD>Your E-mail address</TD>
     <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD></TR>
   </TABLE></form>
   <input type="submit" value="Submit" ng-show="filled_form">
</div>

I'm a native PHP programmer and new to Angular and to Javascript, so I'm working on being a full stack dev. I have used jQuery before. But I'm out of my element and don't have a normal process flow as to how to get through this hurdle. I suspect the solution is either Javascript or jQuery or adding the right unknown angular html-tags to the form DOM element . The idea is to provide a sort of client side validation, so that a user couldn't be able to use the post button unless they at least attempted to fill out the fields. Of course I have server side validations as well.

Is it necessary to find an answer for this with Angular.js, or should I keep it simple and use only javascript?

Answer 1

You could add to your <form> ng-submit="here_function_name(variables)" and remember to move your button inside <form></form> tags.

After click on button, angular will execute here_function_name(variables) which should be defined in $scope in your controller. You can put your validation in this function.

To get access to values in your inputs, there is example below (using ng-model ).

See example of ng-submit and forms in angular here: https://docs.angularjs.org/api/ng/directive/ngSubmit