Question

我无法确定这里缺少的点。浏览器控制台没有帮助。正确使用as lc。提交按钮功能到位。提交按钮不可点击。这是我的登录表单。

 <div class="login-page" ng-app="validationApp" ng-controller="loginController as lc">
<div class="userform"  >

    <form class="login-form" ng-submit="lc.submit()" novalidate>
        <img src="images/logo.png" height="40px" width="40px" margin-bottom="20px"/>


            <input type="text" name-"username"   placeholder="username"  ng-model="user.username" ng-minlength="3" ng-maxlength="8" required />




            <input type="password" name="password" placeholder="password"  ng-model="user.password" ng-minlength="3" ng-maxlength="8" required/>



    <button  id="myButton" type="submit"   class="float-left submit-button"  >Submit</button>

    </form>
  </div>
</div>

这是我的app.css。

.login-page {
 width: 360px;
 padding: 8% 0 0;
  margin: auto;
  }
.form {
 position: relative;
 background: #FFFFFF;
 max-width: 360px;
 margin: 0 auto 100px;
 padding:35px 45px 45px 45px;
 text-align: center;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
 border-radius: 8px;
 border: 3px solid silver;


 }
.form input {
 font-family: "Arial", sans-serif;
 outline: 0;
 background: #f2f2f2;
 width: 100%;
 border: 0;
 margin: 10px 0 15px;
 padding: 15px;
 box-sizing: border-box;
 font-size: 14px;
 }
 .form button {
 font-family: "Arial", sans-serif;
  text-transform: uppercase;
  outline: 0;
 background: #00004d;
 width: 100%;
  border: 0;
 padding: 15px;
   color: #FFFFFF;
   transition: all 0.3 ease;
       cursor: pointer;
      }
   .form button:hover,.form button:active,.form button:focus {
    background: #081a56;
    }

这是我的app.js

'use strict';

//app.js
 //create angular app
 var validationApp = angular.module('validationApp', []);

 //create angular controller
 validationApp.controller('loginController', ['$scope', function($scope) {

 $scope.submit = function() {alert("successful");};

  }]);

Answer 1

使用ng-submit()作为表单元素。

<form class="login-form" ng-submit="submit()" >
        <img src="images/logo.png" height="40px" width="40px" margin-bottom="20px"/>


            <input type="text" name-"username"   placeholder="username"  ng-model="user.username" ng-minlength="3" ng-maxlength="8" required />




            <input type="password" name="password" placeholder="password"  ng-model="user.password" ng-minlength="3" ng-maxlength="8" required/>



    <button  id="myButton" type="submit"   class="float-left submit-button"  >Submit</button>

    </form>

JS：

var validationApp = angular.module('validationApp', []);

 //create angular controller
 validationApp.controller('loginController', ['$scope', function($scope) {

 $scope.submit = function() {alert(successful);};

  }]);

有关详情，请参阅小提琴http://www.w3schools.com/code/tryit.asp?filename=FBTL5JCYPWBN

http://www.w3schools.com/angular/ng_ng-submit.asp

Answer 2

这一行

 <form class="login-form" ng-submit="lc.submit()" novalidate>

应该是

 <form class="login-form" ng-submit="submit()" novalidate>

您的功能名为

**$scope.submit** but the form is calling **lc.submit.**

我相信错误就在哪里

Answer 3

在你的控制器中试试这个

var lc = this;

lc.submit = function（）{alert（successful）;};

Answer 4

或点击下面的ng-click：

<form class="login-form"  novalidate>
    <img src="images/logo.png" height="40px" width="40px" margin-bottom="20px"/>

        <input type="text" name-"username"   placeholder="username"  ng-model="user.username" ng-minlength="3" ng-maxlength="8" required />

        <input type="password" name="password" placeholder="password"  ng-model="user.password" ng-minlength="3" ng-maxlength="8" required/>

<button type="submit" ng-click="submit();" class="float-left submit-button" >Submit</button>
</form>

Answer 5

我只是运行你的代码。它正常工作。您应该检查您的环境，如浏览器客户端等。如果您仍然收到错误。请参阅以下示例：

<form class="form-horizontal" role="form" ng-submit="submit()" name="myForm">

    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2" for="email">First Name:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="fistName" name="fistName" ng-minlength="4" ng-model="employee.fistName" placeholder="Enter First Name" required>
 <span ng-show="myForm.fistName.$touched && myForm.fistName.$error.required">This is a required field</span>
 <span ng-show="myForm.$dirty && myForm.fistName.$error.minlength">Minimum length required is 4</span>
 <span ng-show="myForm.$dirty && myForm.fistName.$invalid">This field is invalid </span><br/> 
      </div>
 </div> 
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2" for="email">Last Name:</label>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="lastName" name="lastName" ng-model="employee.lastName" placeholder="Enter Last Name" required>
 <span ng-show="myForm.lastName.$touched && myForm.lastName.$error.required">This is a required field</span>
 <span ng-show="myForm.$dirty && myForm.lastName.$error.minlength">Minimum length required is 4</span>
 <span ng-show="myForm.$dirty && myForm.lastName.$invalid">This field is invalid </span><br/> 
      </div>
 </div> 
 </div>
    <div class="form-group form-group-sm">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success custom-width" ng-disabled="myForm.$invalid">Submit</button>
        <button type="button" ng-click="reset()" class="btn btn-warning custom-width" ng-disabled="myForm.$pristine">Reset Form</button> 
      </div>
    </div>
    </div>
</form>

来自教程AngularJS Form Validation Example

提交按钮不工作角度

5 个答案: