angularjs表單提交數據為空

Question

大家好日子。

有一個表單元素

<form name="myForm" ng-submit="subMe()">
  <input type="text" name="name" value="" />
</form>

和

$scope.subMe = function(){
  console.log( $scope.myForm ); // return empty object as {}
}

那么，我怎樣才能看到表格中的數據？ 將來會有很多輸入元素。

並且是后端檢查有效表單的最佳做法？ 做一些像：

var _valid = $http.post();
if ( _valid) {
  if ( createUserSuccess() ){
    showSucceess();
  } else {
    showError();
  }
} else {
  showBadFilledFormElements();
}

謝謝！

Answer 1

您沒有提交輸入或按鈕，因此ng-submit不是您用來查看表單數據的內容。

像這樣初始化表單范圍內的空對象

myApp.controller('formController', function($scope) {
  $scope.formData = {};

  $scope.submitForm = function() {
      //do stuff on submit
  }
});

然后將ng-model綁定到您的標記中

<div ng-controller="formController">
   <form name="myForm" ng-submit="submitForm()">
       <input type="text" name="name" ng-model="formData.name" value="" />
       <button type="submit">Submit</button> 
   </form>
    {{formData}}
</div>

您可以在formController范圍內的標記中使用{{formData}}查看它

編輯：更改提交表單函數名稱以使其更有意義。

Answer 2

Eric Olson的答案非常正確。 我只想在這里添加一些內容。 你可能想結帳ngForm

ngForm

表單指令的穩定別名。 HTML不允許嵌套表單元素。 嵌套表單很有用，例如，如果需要確定控件子組的有效性。

注意：ngForm的目的是對控件進行分組，但不能替換具有其所有功能的標記（例如，發布到服務器，......）。

Answer 3

您需要將模型添加到表單的輸入元素：

<form name="myForm" ng-submit="subMe()">
  <input type="text" name="name" value="" ng-model="myForm.name" />
  <input type="text" name="email" value="" ng-model="myForm.email" />
</form>

和

$scope.subMe = function(){
  console.log( $scope.myForm ); // { name: "abc", email: "abc@test.com"}
}

我不確定我理解您問題的第二部分，但是在向api提交表單數據時，您需要創建一個Angular Service以獲得最佳實踐。