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以获得最佳实践。