Question

我创建了一个plnkr来描述我的问题：Link to 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;
      });
    }
  };
});

P.S。我尽可能地剪切代码以从我的主项目中重现问题。我会很感激任何解决方案，但如果有人可以建议解决方案，那将是非常酷的，其中： 1.表现出良好的表现 2.以棱角分明的方式行事。

Answer 1

您应该专注于其他解决方案，而不是编写指令。

你有使用道具的对象（firstNumber，secondNumber，...）。

您需要使用Angular验证属性（为空？是正确的数字？）。

然后，您需要使用非空值过滤对象道具，而不会突变您的模型：您的输入绑定到模型属性，如果您销毁属性，Angular无法验证和失败

我们可以做到：

选择a.fields的所有键

迭代所有键，过滤器

我们获得了所有非空键

将非空键减少为新对象，而不会突变＆＃34; a＆＃34;

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(k => a.fields[k] != null)

编辑：修复代码。

Angular指令将ngmodel值从null更改为undefined中断验证

1 个答案: