Angular - 表格不會提交

Question

我似乎在這里忽略了一些簡單的東西，但它讓我難過。

當我點擊提交按鈕時為什么沒有發生？

<section ng-controller="SavingsController as savingsCTRL">
  <form name="createSavingForm" class="form-horizontal" novalidate>
    <fieldset>
      <!-- Title Box Start-->
      <div class="form-group new-deal-form" show-errors>
        <label for="title">Title</label>
        <input name="title" type="text" ng-model="savingsCTRL.title" id="title" class="form-control" placeholder="Title" required>
        <div class="sub-label">Enter the Title of the Deal.</div>
        <div ng-messages="savingForm.savingsCTRL.title.$error" role="alert">
          <p class="help-block error-text" ng-message="required">Saving title is required.</p>
        </div>
      </div>

      <!-- Title Box End-->

      <!--Submit Button Start-->

      <div class="form-group buttons-cancel-submit">
        <button class="btn btn-default " ng-click="savingsCTRL.cancel()">Cancel</button>
        <input type="submit" class="btn btn-success " ng-click="savingsCTRL.create(); submitForm(createSavingForm.$valid)" >
      </div>
    </fieldset>
  </form>
</div>
</div>
</section>

為簡單起見，我把大部分表格都拿走了，但還有什么不對？

節省控制器功能

 // Create new Saving
        $scope.create = function () {
            $scope.error = null;

            alert("create");

            // Create new Saving object
            var saving = new Savings({


                title: this.title,
                details: this.details,
                retailer: this.retailer,
                price: this.price,
                link: this.link,
                image: $scope.user.imageURL,
                urlimage: this.urlimage,
                tags: this.tags
                //startdate: this.startdate,
                //enddate: this.enddate


            });

            // Redirect after save
            saving.$save(function (response) {
                $location.path('savings/' + response._id);

                // Clear form fields
                $scope.title = '';
                $scope.details = '';
                $scope.retailer = '';
                $scope.price = '';
                $scope.link = '';
                $scope.image = '';
                $scope.urlimage = '';
                $scope.tags = '';


            }, function (errorResponse) {
                $scope.error = errorResponse.data.message;
            });
        };

Answer 1

主要問題是，您將controller as與$scope混合controller as語法。

根據文檔 ，我們應該使用this而不是$scope 。

...使用this方法將方法和屬性直接綁定到控制器上： ng-controller = "SettingsController1 as settings"

比， submitForm不是預定義的方法，它應該首先在控制器中定義

this.submitForm = function(isValid){
   console.log('Submitting form: ' + isValid)
}

除此之外，使用ng-submit= "savingsCTRL.submitForm(createSavingForm.$valid)"將其綁定到表單

請參閱Plunker ，其中包含工作代碼。 （我使用了ng-click =“savingsCTRL.create（）”，因為我們沒有應用程序的所有部分）

Answer 2

將表單提交事件綁定到ng-submit 。

示例： ng-submit="submitForm(createSavingForm.$valid)"