Angular指令将ngmodel值从null更改为未定义的中断验证

Question

I have created a plnkr to describe my problem: Link to plnkr 我创建了一个plnkr来描述我的问题：链接到plnkr

Problem description: I have a number field, the value from which is written to the model. 问题描述：我有一个数字字段，其值从该字段写入模型。 First I implemented this feature like the first input. 首先，我像第一个输入一样实现了此功能。 The problem with this implementation is that if I input something and then delete, I have the following model: 此实现的问题是，如果我输入一些内容然后删除，则我将具有以下模型：

{"firstNumber":null,"secondNumber":64}

For me unfortunately this representation is not acceptable, I need the following result: 对我来说不幸的是，这种表示形式是不可接受的，我需要以下结果：

{"secondNumber":64}

For that I taken the directive and implemented the second field. 为此，我接受了指令并实现了第二个字段。 Now I receive the correct output, but when I remove the value, the form becomes invalid. 现在，我收到正确的输出，但是当我删除该值时，该表单将变为无效。

Also I added third and fourth input to demonstrate that the directive also breaks the required validation. 我还添加了第三和第四输入，以证明该指令也破坏了所需的验证。

So, the question is: How can I improve the input field not to have the model 所以，问题是：如何改善输入字段没有模型

{"firstNumber":null,"secondNumber":64}

but 但

{"secondNumber":64}

and do not broke the validation mechanism of Angular forms. 并且不破坏Angular表单的验证机制。

For reference: I have the following HTML: 供参考：我有以下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>

And following controller and directive code: 以及以下控制器和指令代码：

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 I cut the code as much as possible to reproduce the problem from my main project. ps我尽可能地削减了代码，以重现我的主项目中的问题。 I would appreciate any solution, but it would be very cool, if somebody can suggest the solution, which: 1. Shows good performance 2. Behaves in angular way. 我将不胜感激任何解决方案，但是如果有人可以提出该解决方案，那将是非常酷的事情：1.显示出良好的性能2.以有角度的方式表现。

Answer 1

You should probably focus on other solution, instead of writing directive. 您可能应该专注于其他解决方案，而不是编写指令。

You have object with props (firstNumber, secondNumber, ...). 您有带有道具的对象（firstNumber，secondNumber，...）。

You need to validate property with Angular (is null ? is correct number ?). 您需要使用Angular验证属性（是否为null？是正确的数字？）。

Then, you need to filter the object props with non-null values, without mutation of your model : your input is bind to model property, if you destroy a property, Angular can't be able to validate and fail. 然后，您需要使用非null值过滤对象道具，而无需更改模型：输入绑定到模型属性，如果销毁属性，Angular将无法验证并失败。

We can do it : 我们能做到：

Select all keys of a.fields 选择字段的所有键

Iterate all keys, filters 迭代所有键，过滤器

We got all non-null keys 我们得到了所有非空键

Reduce non-null keys to a new object, without mutation of "a" 减少非空键到新对象，而不会突变“ 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: {} }
  );

And if you need to filter undefined + null, just do little check on filter : 而且，如果您需要过滤undefined + null，只需对filter进行少量检查：

  .filter(k => a.fields[k] != null)

Edit : fix code. 编辑：修复代码。

Angular指令将ngmodel值从null更改为未定义的中断验证

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-14 14:26:11

Angular指令将ngmodel值从null更改为未定义的中断验证

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-14 14:26:11

解决方案1
1 已采纳 2016-10-14 14:26:11