Question

我的表单有问题。我提交表单并且某些字段不必填写，当数据发送到一个安静的API时，我发现有角度没有拿起空的，从未接触过，从不改变了，输入字段。但在服务器端，预计该领域将存在。我如何获得角度来发送这些字段？

我有两个输入（data.Record.one，data.Record.two），当我填写一个并提交表单时我最后会这样：

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

我想这是因为角度没有＆＃34;看到＆＃34;原始的空地。但我想要那个：

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

以下是我尝试的演示：http://plnkr.co/edit/Ky0PQ9U5o1V7IyU9QgkK

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

Answer 1

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

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

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

编辑：我现在看到你想要的东西。 Angular会很好地照顾您的模型（数据）。仅仅因为您将输入字段绑定到sub，sub属性不会使用空字符串初始化该属性。输入字段不包含空字符串 - 它们包含null，这是您首先放入它们（通过将它们绑定到未初始化的属性）。

您需要的功能是使用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 />

Answer 2

将您的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);
    }
}]);

DEMO

更新！使用此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 />

我添加了额外的ng-init指令，它将启动你的数据

DEMO

Answer 3

我只是使用ng-init="inputfieldname=''"

修复了它

Answer 4

我有同样的问题，所以在我的研究中我发现了这个： http://blog.fernandomantoan.com/angularjs-forcando-bind-de-todos-os-campos-no-submit/

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

public function getAcl() {
    if (!isset($this->persistent->acl)) {

        $acl = new AclList();

        ...

        //The acl is stored in session
        $this->persistent->acl = $acl;
    }

    return $this->persistent->acl;
}

因此，当事件提交运行时，在进入方法之前，指令强制绑定。我建议使用ng-submit进行验证。对不起我的英文。

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

4 个答案: