Question

在我的下面的代码中，只有角度验证才有效。当我点击登录按钮，然后没有角度脚本工作。有些身体可以帮助我吗？我的错误在哪里？

HTML code：

   <!DOCTYPE html>
    <html>
    <head> 
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Talkiedo</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
 <!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">



<script src="assets/bootstrap/js/angular.js"></script>
<script src="assets/bootstrap/js/angular-route.min.js"></script>
<script src="assets/bootstrap/js/angular-resource.min.js"></script>
<script src="assets/bootstrap/js/angular-messages.js"></script>


  <script src="loginController.js"></script>

  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\\\
<![endif]-->


<style>
.form-group.required .control-label:after {
  content:"*";
  color:red;
 }
  </style>
  </head> 
  <body style="background-color:#EEF2F5;" ng-app="loginApp" ng-controller="loginController">


<div class="container-fluid">

        <div class="row">

            <div class="col-md-offset-4 col-md-4 well" style="padding-left:50px;padding-right:50px">
                    <h1>Login</h1>
                   <form class="form-horizontal" name="adminForm"  role="form"  ng-submit="submitLogin()" novalidate="novalidate">
                         <div class="form-body">
                        <div class="form-group required" ng-class="{'has-error': adminForm.admin_username.$touched && adminForm.admin_username.$invalid }">
                           <div class="input-group">
                              <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>
                              </div>
                              <input type="email" class="form-control" name="admin_username" id="admin_username" ng-model="admin.admin_username" required  style="padding-top: 0px;" placeholder="Enter Your Email Id">

                            </div>
                             <div class="help-block" ng-messages="adminForm.admin_username.$error" ng-if="adminForm.admin_username.$touched && adminForm.admin_username.$invalid" >
                                <p ng-message="required">Your email is required.</p>
                                </div>
                        </div>

                        <div class="form-group required"  ng-class="{'has-error': adminForm.admin_password.$touched && adminForm.admin_password.$invalid }">
                           <div class="input-group">
                              <div class="input-group-addon">
                                <span class="glyphicon glyphicon-th"></span>

                             </div>
                              <input type="password" class="form-control" name="admin_password" id="admin_password" ng-model="admin.admin_password" required style="padding-top: 0px;" placeholder="Enter Your Password">

                            </div>
                            <div class="help-block" ng-messages="adminForm.admin_password.$error" ng-if="adminForm.admin_password.$touched && adminForm.admin_password.$invalid" >
                                <p ng-message="required">Your Password is required.</p>
                                </div>
                        </div>
                        <span class="help-block" id="wrong_password" name="wrong_password"></span>


                        <div class="form-group">
                          <div class="input-group">

                            <div class=" col-sm-6">
                              <button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
                            </div>
                            <div class="col-sm-6">
                              <button type="" class="btn btn-default btn-cancel center-block">Cancel</button>
                            </div>
                          </div>
                        </div>
                    </div>
                   </form>
            </div>
        </div>     
    </div>
<script src="assets/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bootstrapValidator.min.js"></script>
       <script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js">   </script>
<script src="assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/custome.js"></script>


      </body>
   </html>

AngularJS代码：

// Defining angularjs application.
var loginApp = angular.module('loginApp', ['ngMessages']);
// Controller function and passing $http service and $scope var.
loginApp.controller('loginController', function($scope, $http) {
  // create a blank object to handle form data.
    $scope.admin = {};
  // calling our submit function.

    $scope.submitLogin = function() {
    // Posting data to php file
    alert('dasdas');
     if ($scope.adminForm.$valid) { 
    $http({
      method  : 'POST',
      url     : 'http://localhost/talk/admin/login',
      data    : $scope.admin, //forms user object
      headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
     })
      .success(function(data) {
        if (data.errors) {
          // Showing errors.
         // $scope.errorName = data.errors.address1;
         // $scope.errorUserName = data.errors.address2;
         // $scope.errorEmail = data.errors.address13;
        } else {
          $scope.message = data.message;
        }
      });
    }else {
  alert("There are invalid fields");
    }
    };
       });

Answer 1

问题是您的按钮不是提交，而是普通按钮，因此它不会触发提交操作。

尝试将提交按钮类型更改为submit

Answer 2

我认为你必须改变

<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>

使用提交类型按钮

<button type="submit" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>

所以你可以提交表格

Answer 3

如果您想使用jQuery提交表单，那么您可以执行$('.formClass').submit

ng-submit angular js在php中不起作用

3 个答案: