Angular指令將ngmodel值從null更改為未定義的中斷驗證

Question

我創建了一個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.以有角度的方式表現。

Answer 1

您可能應該專注於其他解決方案，而不是編寫指令。

您有帶有道具的對象（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)

編輯：修復代碼。

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