如何强制 AngularJS 序列化空表单字段答案

【问题标题】：How can I force AngularJS to serialize empty form fields如何强制 AngularJS 序列化空表单字段
【发布时间】：2015-08-21 19:23:34
【问题描述】：

据我所知，如果表单字段为空，AngularJS 不会序列化它。但是，我需要这些字段在生成的 JSON 中，即使它们是空的。我正在尝试查询该 JSON，如果字段描述符不存在，它将失败。关于如何让 AngularJS 做到这一点的任何提示？

在下面的示例中，如果您在 name 字段中输入了“John”，而 optionalval 字段中没有任何内容，则形成的 json 就是这个 {name: John}。但我希望它像这样 {name:'John', optionalval:''}。这是在可选字段可能没有任何值的“创建新”表单的情况下。但是，无论字段是否有值，都需要发送。

<!doctype html>
<html>
    <head>
        <title>Serialize Test</title>
        <script src="js/angular.min.js"></script>
        <script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope, $http) {
				$scope.addnew = function(){
					$http.put('/newthing.json', JSON.stringify($scope.item))
						.success(function(){
						})
						.error(function(){
						});
				};
			});
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
		<label for="name">Name:</label>
		<input type="text" id="name" ng-model="item.name" required>
		<label for="optionalval">Don't put anything here:</label>
		<input type="text" id="optoinalval" ng-model="item.optionalval">

		<button ng-click="addnew()">Serialize</button>
    </body>
</html>

【问题讨论】：

如果您正确使用ng-model，这应该不是问题。提供一些代码。我们无法解决我们看不到的问题
试试这个方法：var dataJSON = { field1 : '1', field2 : ''}, $http{ data : JSON.stringify(dataJSON)
将模型附加到您的输入中，您应该没问题。请出示代码。
感谢您的回复。我添加了一个代码示例来帮助解释这个问题。

标签： json angularjs forms serialization

【解决方案1】：

一种方法是使用空字符串预初始化模型。例如，通过在控制器中设置模型值：

$scope.item = {optionalval: ''};

这是一个演示：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.item = {optionalval: ''};
  $scope.addnew = function() {
    $http.put('/newthing.json', JSON.stringify($scope.item))
    .success(function() {})
    .error(function() {});
  };
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <label for="name">Name:</label>
  <input type="text" id="name" ng-model="item.name" required>
  
  <label for="optionalval">Don't put anything here:</label>
  <input type="text" id="optionalval" ng-model="item.optionalval">

  <button ng-click="addnew()">Serialize</button>
  <pre>{{item | json}}
</div>

【讨论】：

你应该使用从控制器初始化而不是使用ng-init。这不是正确的用法，请参阅文档以获取更多信息。 docs.angularjs.org/api/ng/directive/ngInit
@cverb 好吧，这是指令的正确用法，但是你是对的，在这种情况下控制器的使用可能会更好。已编辑。
dfsq 和 @cverb，感谢您的回复。我将 dfsq 的回复标记为答案，但我希望得到一个不同的答案。我的真实世界代码正在处理一个具有大约 50 多个字段的项目，我希望避免必须初始化所有这些字段，并且只有一个通用的“项目”控制器可以处理任何想要的表单的序列化将其用作控制器。看起来我需要为每个项目类型写一些东西。再次感谢！
好吧，这里没有优雅的解决方案。您将需要编写一些代码（如自定义指令）或添加类似 ngInit 的内容（最简单：ng-init="item.optionalval = ''"）到您希望至少为空字符串的每个输入。
dfsq- 这可能不是一个糟糕的解决方案。至少所有特定于项目的代码都可以包含在表单中，因此我的 JavaScript 代码可以对其正在使用的项目保持不可知论。我的目标是当我需要更改特定项目中的属性时，能够仅更改 SQL 存储过程和 html 表单……我希望保持所有其他代码非常松散耦合。非常感谢您的建议和对我的评论的跟进。干杯！