The form does not work when clicked

4

I'm trying to make a form with 1.5 to obtain the token of a server, but when clicking, I do not get any result or error message.

Use AngularUI Router to set the route of the form ...

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

And I can visualize 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>

On the send button, I set that when I click, I will call the function in.login() with credentials as 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 dependencies auth and session are services that request the Token and save it in LocalStorage and, according to me , its functioning is already verified.

Problem

When you click on the Enter button, nothing happens. There are no error messages in the console and the debug line I placed inside _login() never runs.

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

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

Thank you.

    
asked by toledano 04.10.2016 в 03:56
source

1 answer

3

The problem is in the directive that executes the code

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

The directive ng-submit what it does is

  

Allows executing expressions from angular to events onsubmit

If you go to the documentation

  

Note that submit is only triggered in form elements, not the submit button or input. (The forms are sent, not the 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 by ng-click .

The rules to submit the angular forms are as follows

  • directive ng-submit in element form

  • 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 do not need to write

'in.login(in.credentials)'

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

'in.login()'

and use the values in the code directly.

    
answered by 06.10.2016 / 20:48
source