0

ui.grid を利用する AngularJS アプリケーションがあります。セルの編集時に検証エラーを有効にして表示したい。これは「editableCellTemplate」を介して実装できると思います。

$scope.gridOptions.columnDefs問題の編集可能なセルについて私が持っているものは次のとおりです。

{ 
  field: 'label',
  enableCellEdit: true,
  editableCellTemplate: 
    '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" name="label" ng-minlength="3" ng-maxlength="10" required />' +
    '<span class="error" ng-show="label.$error.minlength">Too short!</span>'
  },

ng-showしたがって、おそらく上で明らかなように、スパンをセルの編集入力にリンクする方法がわかりません。Inspect Element を使用すると、ng-invalid-minlengthクラスが に追加されていることがわかりinput、セルが赤くなります。したがって、検証が開始されます。表示されているスパンが見えません。どうすればそれを示すことができますか?

4

2 に答える 2

2

Aquiles のコードには小さなタイプミスがあります。エラーがなければエラーメッセージが表示されるはずです。

次のようになります。

ng-show=\"!inputForm.$valid\"

(Aquilesさんの回答への返信ですが、直筆コメントの評判が抜けてます)

挨拶：マカリウス

于 2015-06-04T12:22:08.747 に答える
2

ui-grid 3.0 RC19 では、editableCellTemplate アプローチは正しいです。'ui-grid/cellEditor' $templateCache が定義されている ui-grid.js から直接コピーすることをお勧めします。

   $templateCache.put('ui-grid/cellEditor',
       "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng- class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"></form> </div>");

次に、コードに含めるように変更しました。

   { 
      field: 'label',
      enableCellEdit: true,
      editableCellTemplate: 
      "<div><form name=\"inputForm\"><input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\" name=\"label\" ng-minlength=\"3\" ng-maxlength=\"10\" required validate-required-cell></form></div><span class=\"error\" ng-show=\"inputForm.$valid\">Too short!</span>"
    },

私の場合、要素がフォーカスを失ったときにセルを閉じるのを停止するために、validateRequiredField という名前の追加ディレクティブが必要でした。

  angularStartDirectives.directive('validateRequiredCell', function(uiGridEditConstants) {
    return {
        restrict: 'A',
        scope: false,
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            element.bind('blur', function(evt) {

              if (scope.inputForm && !scope.inputForm.$valid) {

                // Stops the rest of the event handlers from being executed
                evt.stopImmediatePropagation();
              }

            });

        }
    };
});

次のようなスタイルを含めることもできます。

  form input.ng-invalid {

      border-color:red;
  }

  form input.ng-valid {

     border-color: transparent;
  }

さらなる改善のための参照:

UI グリッドの検証

于 2015-02-12T18:40:58.013 に答える