web-dev-qa-db-ja.com

ng-submitがangularjsで機能しない

私の見解：

<div class="modal" tabindex="-1" role="dialog" ng-controller="LocationController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">
          Add a Location
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" ng-submit="createLocation()">
          <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="Warehouse A, Row 15, Shelf BC1, etc" ng-model="name">
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="warehouse, row, shelf, etc" ng-model="type">
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

私のコントローラー：

angular.module('mean').controller('LocationController', ['$scope', '$location', '$rootScope', 'LocationService', '$modal', '$routeParams', function ($scope, $location, $rootScope, LocationService, $modal, $routeParams) {

  $scope.createLocation = function() {
alert('afds');
    LocationService.create(this).then(function(response) {
      console.log(response);
    });
  }

}]);

それでも、[保存]をクリックしても、アラートは表示されません。何が起こっているのか分かりません。

javascriptangularjsng-submit
24
Shamoon

Matt Way の comment のおかげで、保存ボタンがフォームの外にあることがわかりました。一定

40
Shamoon

ボタンがフォーム内にあり、_ng-submitが機能していない場合、ボタンtypeをsubmitに変更します。

<button type="submit" class="btn btn-success" ng-click="login()">Login</button>

追伸：ボタンの種類をsubmitに変更するまで、他の回答は役に立ちませんでした。お役に立てれば。

22
Amarnath

ここに示すように、ネイティブブラウザの検証を避けるために、フォームタグに「novalidate」属性を追加する必要があるかもしれません https://docs.angularjs.org/guide/forms

7
Musma

これも影響します。フォームに送信ボタン（ボタンまたは入力type = "submit"）がなければ、ng-submitは機能しません。

2
emerino

私にとって、問題はフォームフィールドの1つにある「必須」タグでした。このタグを削除した後、フォームは再び機能しました。このような問題を解決する古い方法は、フォームの一部にコメントを付けてコードを実行することです。

フォームで 'novalidate'タグを使用し、type = "submit"でボタンを使用することを好みます。これにより、フォームの検証は角度によって行われます。

1
makkasi