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
2
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
1
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);
}
}]);
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指令,它将启动你的数据
#3
1
I fixed it simply using ng-init="inputfieldname=''"
我只是使用ng-init =“inputfieldname =''”修复它
#4
0
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进行验证。对不起我的英文。
#1
2
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
1
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);
}
}]);
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指令,它将启动你的数据
#3
1
I fixed it simply using ng-init="inputfieldname=''"
我只是使用ng-init =“inputfieldname =''”修复它
#4
0
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进行验证。对不起我的英文。