【问题标题】：Angularjs - ng-submit not working in formAngularjs - ng-submit 无法正常工作
【发布时间】：2018-04-19 21:47:57
【问题描述】：

我是 AngularJS 的新手，我正在尝试使用 ng-submit 提交一个简单的表单，但按钮无法正常工作，因为它不可点击，它在 Firefox 上工作，但光标在按钮上时仍然没有改变并且无法在 Chrome 上运行。

HTML

<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
      <div class="form-group">
          <label for="name">Trip Name</label>
          <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name"/>
      </div>
      <div class="form-group">
           <input type="submit"  class="btn btn-sm btn-success" id="submit" value="Add"/>
      </div>  
</form>

JavaScript

 vm.addTrip = function ()
    {
        alert(vm.newTrip.name);
    };

【问题讨论】：

你在输入和表单上有ng-submit，在输入上删除一个
这也不起作用，请参阅我编辑的帖子。
可能与您的控制器有关。如果你有一个范围变量 $scope.addTrip，那么你应该能够在 ng-submit 上使用 addTrip
是正在执行的警报方法。在 alert 方法中传递一个字符串以检查 ng-submit 是否正常工作..
通过输入 ng-click="vm.addTrip()" 来测试你的语法或函数，如果它没有触发，那么你的控制器有问题

标签： javascript html asp.net angularjs

【解决方案1】：

试试这个：

<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
  <div class="form-group" ng-init="vm.newTrip.name = '';">
      <label for="name">Trip Name</label>
      <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name" required/>
  </div>
  <div class="form-group">
       <input type="submit"  class="btn btn-sm btn-success" id="submit" value="Add"/>
  </div>

【讨论】：

【解决方案2】：

基于和AngularJS docs，您可以在表单上提交两次。

我根据文档和您的示例创建了一个快速示例。

(function() {
  var app = angular.module("test", []);
  
  var TestController = function() {
    var vm = this;
    vm.newTrip = {
      name: ""
    };
    vm.addTrip = function() {
      // Some code
      console.log("Added " + vm.newTrip.name + " to database!");
      vm.newTrip.name = "";
    }
  }

  app.controller("TestController", [TestController]);
})();

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="test">
  <div ng-controller="TestController as vm">
    <form novalidate name="newTripForm" ng-submit="vm.addTrip()">
      <div class="form-group">
        <label for="name">Trip Name</label>
        <input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" />
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-sm btn-success" id="submit" value="Add" />
      </div>
    </form>
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

试试这个删除表格

<div class="form-group">
          <label for="name">Trip Name</label>
          <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name"/>
      </div>
      <div class="form-group">
           <button ng-click="addTrip()"></button>
      </div>

【讨论】：