Javascript AngularJS如何提交未触及的空表单字段？

我的表格有问题。我正在提交表单，一些字段不必填写，当数据被发送到restful API时，我发现angular不会选择空的、从未接触过的、从未更改过的输入字段。 但在服务器端，该字段应该存在。我怎样才能发送这些字段呢

我有两个输入（data.Record.one，data.Record.two），当我填写其中一个并提交表单时，我的结果是：

{
  "Record": {
    "one": "test"
  }
}

我猜这是因为angular无法“看到”未触及的空字段。 但我希望：

{
  "Record": {
    "one": "test",
    "two": ""
  }
}

以下是我尝试的演示：

---

我很清楚，我可以使用空骨架对象初始化表单，但我更愿意而不是必须这样做。如果我需要这样做，那么这只是额外的代码，作为奖励，如果其他开发人员在表单中添加了一个字段，但忘记/不知道JS代码中的框架，那么可能会引入一个失败区域。

将您的app.JS代码替换为此代码

var myApp = angular.module('myApp', []);

myApp.controller('TestFormController', ['$scope', '$log', function($scope, $log) {
    $scope.data = {
      Record : {
        "one": "",
      "two": ""
      }
    }
    $scope.add = function() {
        $log.log($scope.data);
    }
}]);

更新！ 使用此html更改您的视图

One <input name="one" ng-init="data.Record.one = ''" ng-model="data.Record.one"  /><br /> 
Two <input name="one" ng-init="data.Record.two = ''" ng-model="data.Record.two" /><br />

One

两个

我添加了额外的ng init指令，它将初始化您的数据

---

默认情况下，Angular将空字段视为空/null。您可以通过在输入字段中添加

ng trim=“false”

来禁用此功能

这不会添加额外的代码，只会在标记上添加定义

编辑：我现在知道你想要什么了。Angular会很好地维护您的模型（数据）。仅仅因为将输入字段绑定到子属性，子属性就不会使用空字符串初始化属性。输入字段不包含空字符串-它们包含null，这是您首先放入它们的内容（通过将它们绑定到非斜体属性）

您需要的功能是用于初始化数据。记录所需的属性。您可以为名为initialize的属性创建一个自定义指令，将其模型设置为空字符串

编辑：我创建了指令，但由于一些跨域问题，plunker不允许我访问。不过，你应该能够在自己的工作中使用它

myApp.directive('initializeProperty', function() {
  return {
      restrict: 'A',
      link: function (scope, element, attr) {
        element.val('');
      }
  };
});

然后在输入字段上使用以下命令：

One <input name="one" ng-model="data.Record.one" initialize-property ng-trim="false" /><br />
Two <input name="one" ng-model="data.Record.two" initialize-property ng-trim="false" /><br />

One

两个

我只是用

ng init=“inputfieldname=”

修复了它，我也有同样的问题，所以在我的研究中我发现：

解决我的问题，但我必须编辑，因此：

.directive('forceBind',  function() {
    return {
        require: '^form',
        priority: -1,
        link: function (scope, element, attrs, form) {
            element.bind('submit', function() {
                angular.forEach(form, function(value, key) {  
                    if(typeof value == 'object'){
                        if (value.hasOwnProperty('$modelValue')) {
                            if (!value.$viewValue) {
                                value.$setViewValue("");
                            }
                        }
                    }
                });
            });
        }
    };
});

因此，当事件submit运行时，在进入方法之前，指令force bind。 我建议使用ng submit进行验证。

---

对不起，我的英语不好。

下次试着写有问题的代码，所以如果你粘贴了大量代码，而旁边没有太多的文字，你就不喜欢了：“看起来你主要是在发布代码”。角度示例通常较长，因为演示它所需的所有JS和HTML…我理解这一点。您想让AngularJS为映射到输入字段的所有属性使用空字符串自动初始化记录对象吗？是的，正是这样。：）但我希望避免使用“空”模板对象初始化表单。@Falk我已经更新了我的答案（更新1），希望这能解决您的问题。如果您现在忙着做其他事情，我会稍后再试。