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

Question

我的表格有问题。我正在提交表单，有些字段不必填写，当数据发送到 restful API 时，我看到 angular 不会拾取空的、从未接触过的、从未更改过的输入字段。但在服务器端，该字段预计会存在。我怎样才能获得 Angular 来发送这些字段呢？

我有两个输入(data.Record.one，data.Record.two)，当我填写一个并提交表单时，我将得到这样的结果:

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

我想这是因为 Angular 不会“看到”未触及的空字段。但我想要这样:

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

这是我尝试的演示:http://plnkr.co/edit/Ky0PQ9U5o1V7IyU9QgkK

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

Answer 1

Angular 默认将空字段视为空/空。您可以通过在输入字段中添加 ng-trim="false" 来禁用此功能。

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

https://docs.angularjs.org/api/ng/input/input%5Btext%5D

编辑:我现在明白你想要什么了。 Angular 会很好地照顾您的模型(数据)。仅仅因为您将输入字段绑定(bind)到子属性，子属性不会用空字符串初始化该属性。输入字段不包含空字符串 - 它们包含 null，这是您首先放入其中的内容(通过将它们绑定(bind)到未初始化的属性)。

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

编辑:我创建了指令，但由于某些跨域问题，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 />