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>

您可以在{{formData}}

范围内的标记中使用formController进行查看

编辑：更改提交表单函数名称以使其更有意义。

Answer 2

Eric Olson的答案非常正确。我只想在这里添加一些内容。您可能想要结帐ngForm

<强> ngForm

表单指令的Nestable别名。 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以获得最佳做法。

angularjs表单提交数据为空

3 个答案: