I am trying to make a form with angularjs 1.5 to get the token from a server, but when clicking I am not getting any result or error message.
I 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 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 clicked the function is called in.login()
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 dependencies auth
and session
are services that request the Token and save it in LocalStorage
and, according to me , its operation is already verified.
Problem
Clicking the Enter button does nothing. There are no error messages in the console and the debug line I put inside _login()
never runs.
I would like to know what I am doing wrong and how to correct my error.
The expected result is the following: I type the username and password and press the submit button. These two data are passed to the service auth
that sends them to the server that returns a token. But I can't get past the first step.
Thanks.
The problem is in the directive that executes the code
What the directive
ng-submit
does isIf you go to the documentation
This directive should be in your
form
not on the button like you have now. You can put it on the button by changing it to
ng-click
.The rules for submitting angular forms are as follows
directive
ng-submit
on elementform
directive
ng-click
on first button orinput
typesubmit
To avoid double execution of the event use either
ng-click
orng-submit
but not both.By the way you don't need to write
since
vm.credentials
oin.credentials
is available in your controller so you can writeand use the values in the code directly.