AngularJS 表单未通过 ng-click 事件提交答案

【问题标题】：AngularJS form is not submitting with ng-click eventAngularJS 表单未通过 ng-click 事件提交
【发布时间】：2017-03-27 08:52:01
【问题描述】：

我开始创建一个 AngularJS 表单，我的 AngularJS 应用程序的其他部分工作正常。

html 文件如下所示

<form role="form" ng-submit="submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"
           ng-click="submitForm()" />
</div>
</form>

控制器

  var QuestionEditController = function ($location, questionService, $env) {

    var employee = {};

    console.log('pre employee', employee);  // this works

    submitForm = function () {

        console.log('employee', employee);  // clicking on submit button does not make it in here

    };

我正在使用 ui-router，看起来像这样

     .state("editquestion",
            {
                url: "/editquestion",
                templateUrl: viewBase + "questionEdit.html",
                controller: "QuestionEditController",
                controllerAs: "vm"
            });

};

我确实有一个简单的指令，它只是显示 html 代码模板，但我看不出这会导致什么问题，我做错了什么？

更新

好的，问题确实是 ng-click。

但是，我想知道我是否正在创建更多的“混乱”看看我在 submitForm 前面添加的其他内容 (vm.)

新 HTML

<form role="form" ng-submit="vm.submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="vm.employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"/>
</div>
</form>

控制器已更新

var QuestionEditController = function ($location, questionService, $env) {

    var vm = this;

    vm.employee = {};

    console.log('pre employee', vm.employee);

    vm.submitForm = function () {

        console.log('employee', vm.employee);

    };

};

我正在做的事情是需要做的，还是部分不需要？

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-ui-router

【解决方案1】：

由于documentation，您不需要ng-click指令来触发ng-submit。只需在表单元素中输入type="submit" 即可。 ng-submit 将通过按下表单中的提交按钮来触发。

<form role="form" ng-submit="vm.submitForm()">
    <div class="form-group">
        <label for="fullName">Name</label>
        <input type="text" 
               id="fullName" 
               name="fullName" 
               class="form-control" 
               ng-model="vm.employee.fullName" />
    </div>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" 
               class="btn btn-primary" value="Submit" />
    </div>
</form>

确保您的提交函数是基于控制器或基于范围的函数，以便它能够被视图调用：

var QuestionEditController = function ($location, questionService, $env) {
    var vm = this
    vm.employee = {};
    vm.submitForm = function () {
        console.log('employee', employee);  
    };
};

【讨论】：

我确实四处放置了 vm.submitForm 、 vm.employee 等。直到我删除了ngclick 我想我不确定是什么，因为我在看一个角度视频（但是它在控制器之前使用 $scope 等......
我没有使用 $scope 和控制器作为修复它有充分的理由（这个关键字，角度 2，ES 2015 等。$scope 注入已成为一种不好的做法 - 好的，我明白了你修好了 thx

【解决方案2】：

使您的功能范围，以便从表单访问。

删除ng-click 也因为您使用ng-submit 就像@lin 提到的那样

 $scope.submitForm = function () {
   console.log('employee', employee); 
};

更新

如果您没有在控制器中使用范围，则将this 分配给变量并像在 html 中一样使用控制器

ng-controller="ctrl as vm"

演示

var QuestionEditController = function ($scope) {
    var vm  = this
    vm.employee = {};

    console.log('pre employee', vm.employee);  // this works

    vm.submitForm = function () {
        console.log('employee', vm.employee); 
    }; 
   }
    
    angular.module("app",[])
.controller("ctrl",QuestionEditController)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
 <form role="form" ng-submit="vm.submitForm()">

    <div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control" ng-model="vm.employee.fullName" />
    </div>

    <div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
</form>
</div>

【讨论】：

@Jeremy Miller 然后在 html 中使用控制器 ng-controller="ctrl as vm" 再次查看演示
我没有使用 $scope 和控制器作为修复它有充分的理由（这个关键字，角度 2，ES 2015 等。$scope 注入已成为一种不好的做法

【解决方案3】：

          <html lang="en" ng-app="demo">
          <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" 

   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script>
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
 </script>
  <script 
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
        <script src="angular.js"></script>
    <script>
        angular.module("demo",[])
        .controller("cc",function($scope){
            $scope.students = 
 ["student1","student2","student3","student4","student5","student6","student7","student8"]
        })


    </script>

<body>

        <div class="container"></div>
       <div class="row">
      <div class="col-md-4 "><strong> Batch 1</strong> </div>

     <div class="col-md-4 col-md-offset-4 pull-right" > <strong> Venu 4</strong>
 </div>


 </div>

    <div class="panel panel-default">
   <!-- Default panel contents -->
   <div class="panel-heading"><strong>Name</strong></div>


  </div>

  <!-- List group -->
        <div ng-controller="cc">
        <ul class="list-group" ng-repeat="student in students">
        <li class="list-group-item">{{student}}</li>
  </ul>
</div>
        </body>
</html>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
这根本不能解决问题。这是一种毫无意义的答案。
欢迎来到stackoverflow，请仔细阅读本节stackoverflow.com/help/accepted-answer

【解决方案4】：

无需处理 ng-click 事件即可提交表单。使用 type="submit"

<form role="form" ng-submit="vm.submitForm()">
    <div class="form-group">
        <label for="fullName">Name</label>
        <input type="text" 
               id="fullName" 
               name="fullName" 
               class="form-control" 
               ng-model="vm.employee.fullName" />
    </div>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" 
               class="btn btn-primary" value="Submit" />
    </div>
</form>

【讨论】：