CODEWITHSUNDEEP
angularjsnode.jshtml
David Luque
David Luque

Reputation: 1108

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?

Upvotes: 0

Views: 321

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

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.

Upvotes: 1

Related Questions