0

問題を説明するために plnkr を作成しました: plnkr へのリンク

問題の説明: 数値フィールドがあり、そこから値がモデルに書き込まれます。最初に、最初の入力のようにこの機能を実装しました。この実装の問題は、何かを入力してから削除すると、次のモデルになることです。

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

残念ながら、この表現は受け入れられません。次の結果が必要です。

{"secondNumber":64}

そのために、ディレクティブを使用して 2 番目のフィールドを実装しました。正しい出力を受け取るようになりましたが、値を削除するとフォームが無効になります。

また、3 番目と 4 番目の入力を追加して、ディレクティブが必要な検証にも違反していることを示しました。

したがって、問題は次のとおりです。モデルを持たないように入力フィールドを改善するにはどうすればよいですか

{"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.角度のある方法で動作します。

4

1 に答える 1