angularjs – Form does not work on click

Question:

I am trying to make a form with angularjs 1.5 to get the token from a server, but on clicking I am not getting any results or error messages.

I use AngularUI Router to set the form path …

      // otras rutas
      .state('login', {
        url: '/login',
        templateUrl: '/app/auth/_login.form.html',
        controler: 'LoginController',
        controllerAs:'in'
      });
      // otras rutas

And I can display my form correctly:

<!-- Archivo: /app/auth/_login.form.html -->
<div class="row">
  <div class="offset-sm-3 col-sm-6">
    <h2>Formulario de Ingreso</h2>
    <form role="form" name="form">
      <div class="form-group">
        <label for="username">Nombre de Usuario</label>
        <input type="text" data-ng-model="in.credentials.username" name="username" id="username" class="form-control" required />
        <span></span>
      </div>
      <div class="form-group">
        <label for="password">Contraseña</label>
        <input type="password" data-ng-model="in.credentials.password" name="password" class="form-control"  id="password" />
      </div>
      <div class="form-actions">
        <button data-ng-submit="in.login(in.credentials)" type="submit" id="submit" class="btn btn-primary">Ingresar</button>
      </div>
    </form>
  </div>
</div>

In the submit button I establish that when clicking is called the in.login() function with credentials as a parameter. This is the controller.

(function(angular){
  'use strict';

  function LoginController($scope, $rootScope, auth, session){
    var self = this;
    var _credentials = $scope.credentials;

    var _login = function(_credentials){
      // console.log(_credentials);
      // ^^^^^^^^^^^^^^^^^^^^^^^^^^ Esta línea **nunca se ejecuta**
      auth
        .logIn(_credentials)
        .then(function(){
          _user = session.getUser();
        });
    };

    self.login = _login;
    self.credentials = _credentials;
  }

  LoginController.$inject = ['$scope', '$rootScope', 'auth', 'session'];

  angular.module('cmi')
    .controller('LoginController', LoginController);

})(angular);

The auth and session dependencies are services that request the Token and save it in LocalStorage and, according to me , its operation is already verified.

Trouble

When you click the Login button, nothing happens. There are no error messages in the console and the debug line that I put inside _login() never executes.

I would like to know what I am doing wrong and how to correct my mistake.

The expected result is the following: I type the username and password and press the submit button. These two data are passed to the auth service that sends them to the server that returns a token. But I can't get past the first step.

Thank you.

Answer:

The problem is in the directive that executes the code

<button data-ng-submit="in.login(in.credentials)" type="submit" .....

What the ng-submit directive does is

Allows you to execute angular expressions to onsubmit events

If you go to the documentation

Note that submit is only triggered on form elements, not on the submit button or input. (Forms are submitted, not buttons.)

This directive should be in your form

<form role="form" name="form" data-ng-submit="in.login(in.credentials)">

not on the button as you have it now. You can put it on the button if you change it to ng-click .

The rules for submitting angular forms are as follows

  • ng-submit directive in form element

  • directive ng-click on the first button or input type submit

To avoid double execution of the event use either ng-click or ng-submit but not both.

By the way you don't need to write

`in.login(in.credentials)`

since vm.credentials or in.credentials is available in your controller so you can type

`in.login()`

and use the values ​​in the code directly.

Post Views: 0
Scroll to Top