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

I've got a problem with a form. I'm submitting the form and some of the fields don't have to be filled, when the data is send to a restful API I see that angular doesn't pick up the empty, never touched, never changed, input fields. But on the server side the field is expected to be present. How can I get angular to send these fields as well?

我的表格有问题。我正在提交表单,并且一些字段不必填写,当数据发送到一个宁静的API时,我看到angular不会拾取空的,从未触及,从未改变的输入字段。但在服务器端,预计该领域将存在。我怎样才能获得角度来发送这些字段?

I have two inputs (data.Record.one, data.Record.two), when I fill one and submit the form I'm ending up with this:

我有两个输入(data.Record.one,data.Record.two),当我填写一个并提交表单时,我最终得到这个:

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

I guess this is because angular doesn't "see" untouched and empty fields. But I want that:

我想这是因为角度不会“看到”未被触及的空场。但我希望如此:

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

Here is a demo of what I try: http://plnkr.co/edit/Ky0PQ9U5o1V7IyU9QgkK

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

I'm well aware that I could initialize the form with an empty skeleton object but I would really prefer to not have to do that. If I need to do that it's just additional code that as a bonus will just introduce an area of potential fail if another dev adds a field in the form but forgets / doesn't know about the skeleton in the JS code.

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

4 个解决方案

#1

Angular treats empty fields as empty/null by default. You can disable this by adding ng-trim="false" on your input fields.

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

This will not add extra code, only definition on your markup.

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

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

EDIT: I see now what you want. Angular takes good care of your model (data). Just because you bind an input field to a sub,sub property won't initialize the property with empty string. The input fields does not contain empty string - they contain null which is what you put in them in the first place (by binding them to an uninitalized property).

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

The feature you want, is for angular to initialize your data.Record with the properties you need. You could make a custom directive for that called initialize-property that would set its model to an empty string.

您需要的功能是角度来初始化您的数据。记录您需要的属性。您可以为该名为initialize-property的用户创建一个自定义指令,该指令将其模型设置为空字符串。

EDIT: I created the directive but plunker won't let me access due to some cross domain problems. You should be able to use it in your own work though

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

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

And then on your input fields use this:

然后在输入字段中使用:

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 />

#2

replace your app.js code to this one

将您的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

UPDATE ! change your view with this html

更新!用这个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 />

i have added extra ng-init directive which will initilize your data

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

DEMO

#3

I fixed it simply using ng-init="inputfieldname=''"

我只是使用ng-init =“inputfieldname =''”修复它

#4

I had the same problem, so then in my research I find this: http://blog.fernandomantoan.com/angularjs-forcando-bind-de-todos-os-campos-no-submit/

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

Solve my problem, but I had to edit, thus:

解决我的问题,但我必须编辑,因此:

.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("");
                            }
                        }
                    }
                });
            });
        }
    };
});

So, when the event submit runs, before entering in method the directive force bind. I recommend using ng-submit for validation. Sorry my english.

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