David Luque David Luque - 9 months ago 31
Node.js Question

Form doesn't submit

I'm coding a web app with MEAN, and I don't understand the way to validate a form with Angular and pass the info to Node to register or login an user.

Here's my jade code

html(ng-app="modulo")
...
body#page-top.index(ng-controller="mainController")
...
div
a.btn.btn-default(ng-click="ShowForm()")
span.fa.fa-user
| Local Login

a.btn.btn-default(href='/signup')
span.fa.fa-user
| Local Signup
|
a.btn.btn-primary(href='/auth/facebook')
span.fa.fa-facebook
| Facebook
|
a.btn.btn-danger(href='/auth/google')
span.fa.fa-google-plus
| Google+

form(name="submit_form" ng-submit="submit()" ng-show="formVisibility")
div.form-group
label Email
input(type="text" name="email").form-control
div.form-group
label Password
input(type="password" name="password").form-control
button(type="submit").btn.btn-warning.btn-lg
| Login


And my Angular controller

var modulo = angular.module('modulo', []);

modulo.controller('mainController', ['$scope', function($scope){

$scope.message = 'Hello World!'

$scope.formVisibility = false;

$scope.ShowForm = function(){
$scope.formVisibility = true;
}

$scope.submit = function(){
if($scope.submit_form.$valid)
alert("Nuestro formulario es guay");
}}]);


When I press the submit button the app show the alert but Node doesn't works so I can't access to the web.

What I have to add to make local login?

Answer Source

Because we generally create single page apps with Angular, we don't want the browser to automatically submit the form. If it did, it would cause a full page load with the server response, "breaking" the single page app functionality.

You have to write code to submit the form and its data (using $http or $resource). I assume your submit() function is getting called, so the next step is to POST (or whatever) the data:

$scope.submit = function() {
  if ($scope.submit_form.$valid) {
    // inject $http into your controller
    $http.post('/some/url', myFormData);
  }
}

PS: If you want the browser to submit the form, just add the action attribute to the <form> tag. Angular will see that and let the browser submit the form.