[英]Angular directive change ngmodel value from null to undefined breaks validation
我创建了一个plnkr来描述我的问题: 链接到plnkr
问题描述:我有一个数字字段,其值从该字段写入模型。 首先,我像第一个输入一样实现了此功能。 此实现的问题是,如果我输入一些内容然后删除,则我将具有以下模型:
{"firstNumber":null,"secondNumber":64}
对我来说不幸的是,这种表示形式是不可接受的,我需要以下结果:
{"secondNumber":64}
为此,我接受了指令并实现了第二个字段。 现在,我收到正确的输出,但是当我删除该值时,该表单将变为无效。
我还添加了第三和第四输入,以证明该指令也破坏了所需的验证。
所以,问题是:如何改善输入字段没有模型
{"firstNumber":null,"secondNumber":64}
但
{"secondNumber":64}
并且不破坏Angular表单的验证机制。
供参考:我有以下HTML:
<body ng-controller="MainCtrl as vm">
<h1>Validating input inside ng-repeat with Angular 1.3</h1>
<form name="vm.myForm" novalidate>
<input type="number" ng-model="vm.fields.firstNumber" name="firstNumber">
<input type="number" ng-model="vm.fields.secondNumber" name="secondNumber" null-to-undefined>
<br>
<input type="number" ng-model="vm.fields.thirdNumber" name="thirdNumber" ng-required = "true">
<input type="number" ng-model="vm.fields.fourthNumber" name="fourthNumber" null-to-undefined ng-required="true">
</form>
</body>
以及以下控制器和指令代码:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.fields = {};
vm.fields.firstNumber = 12;
vm.fields.secondNumber = 24;
vm.fields.thirdNumber = 64;
vm.fields.fourthNumber = 128;
});
app.directive('nullToUndefined', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.push(function(viewValue, modelValue) {
if (viewValue === null) {
$timeout(function() {
//ctrl.$setValidity('number', true);
});
return undefined;
}
return viewValue;
});
}
};
});
ps我尽可能地削减了代码,以重现我的主项目中的问题。 我将不胜感激任何解决方案,但是如果有人可以提出该解决方案,那将是非常酷的事情:1.显示出良好的性能2.以有角度的方式表现。
您可能应该专注于其他解决方案,而不是编写指令。
您有带有道具的对象(firstNumber,secondNumber,...)。
您需要使用Angular验证属性(是否为null?是正确的数字?)。
然后,您需要使用非null值过滤对象道具,而无需更改模型:输入绑定到模型属性,如果销毁属性,Angular将无法验证并失败。
我们能做到 :
- 选择字段的所有键
- 迭代所有键,过滤器
- 我们得到了所有非空键
- 减少非空键到新对象,而不会突变“ a”
const a = {
fields: {
a: 1,
b: 2,
c: null,
},
};
// After form validation
const newA = Object
.keys(a.fields)
.filter(k => a.fields[k] !== null)
.reduce(
(accumulator, k) =>
Object.assign(
accumulator,
{
fields: Object.assign(accumulator.fields, { [k]: a.fields[k] })
}
),
{ fields: {} }
);
而且,如果您需要过滤undefined + null,只需对filter进行少量检查:
.filter(k => a.fields[k] != null)
编辑:修复代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.