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

As far as I can tell, AngularJS does not serialize a form field if it is empty. But, I need this fields to be in the JSON that is generated, even if they are empty. I am trying to query that JSON, and it will fail if the fields descriptors are not there. Any tips on how to get AngularJS to do this?

据我所知，如果表单字段为空，AngularJS不会序列化表单字段。但是，我需要将这些字段放在生成的JSON中，即使它们是空的。我试图查询该JSON，如果字段描述符不在那里它将失败。有关如何让AngularJS执行此操作的任何提示？

In the example below, if you entered "John" into the name field, and nothing in the optionalval field, the json that is formed is this {name: John}. But I would like it to be like this {name:'John', optionalval:''}. This is in the case of a "create new" form where optional fields might not have any values. But, the fields need to be sent whether they have values or not.

在下面的示例中，如果您在名称字段中输入“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>

1 个解决方案

#1

One way is to preinitialize model with empty string. For example, by setting model value in controller:

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

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

Here is a demo:

这是一个演示：

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>

#1