угловые данные не связывающие

Question

У меня есть форма входа, которую я пытаюсь собрать данные для отправки в мой API, HTML, выглядит немного как это,

<form novalidate ng-controller="loginController" ng-submit="doLogin()"> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="formData.username"> 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="formData.password"> 
</form> 

мой контроллер Войти выглядит так,

var app = app || {}; 
app.controller('loginController', function($scope, $routeParams, authentication) { 
    $scope.formData = {}; 

    $scope.doLogin = function(form) { 
     //authentication.authenticate(); 
     console.log($scope.formData); 
    } 
}); 

функция doLogin работает на форме submit, но $scope.formData пуст, я ожидал бы, что у вас есть имя пользователя и пароль?

Answer 1

Проблема заключается в том, что вы создаете имя пользователя = «email», а html5 проверяет шаблон регулярного выражения, что введенное значение должно быть действительным, например: «alex@h.com» здесь. Прикрепляю пример кода : http://codepen.io/alex06/pen/NRvXNm , а также информация об этом в угловых Docs: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

angular 
    .module('myApp',[]) 
    .controller('loginController', function($scope) { 
    $scope.formData; 

    $scope.doLogin = function(form) { 
     //authentication.authenticate(); 
     console.log($scope.formData); 
    } 
}); 




    <div ng-app="myApp"> 
    <form novalidate ng-controller="loginController" ng-submit="doLogin()" name="myForm"> 
     <input type="email" name="emailInput" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="formData.username"> 
     <span style="color: red;" ng-show="myForm.emailInput.$error.email">error</span> 
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="formData.password"> 
     <input type="submit"> 
    </form> 
    </div>