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函数在表单提交时运行，但$scope.formData为空，我希望有一个用户名和密码属性？

Answer 1

这里的问题是你使用正则表达式模式进行用户名类型=“电子邮件”和html5验证，输入的值必须是有效的：“alex@h.com”这里我在代码笔上附上一个例子： http://codepen.io/alex06/pen/NRvXNm 还有角度文档中的信息：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>

角度数据没有约束力

1 个答案: