沒有編輯的角度UI網格驗證

我創建了一個帶有驗證的UI網格。我追加一個空行給用戶填寫。它看起來像驗證只發生在編輯。這似乎是有效的，因爲用戶還沒有與單元格進行任何交互 - 但是如果用戶開始編輯單元格 - 但是然後決定不這樣做 - 空行仍然不會發生驗證。沒有編輯的角度UI網格驗證

有兩種情況，我想支持：

一個空的「新」行
- 沒有視覺驗證失敗
- 用戶啓動編輯 - 但後來點擊了未做任何更改
- 驗證失敗可見
An現有行是無效
- 與負載數據未通過驗證
- 驗證失敗是立即可見，無需任何用戶交互

Plunker：http://plnkr.co/edit/cb9Vb9b4iTC8z4haahbL?p=preview

$scope.gridOptions.columnDefs = [ 
    { name: 'id', 
     enableCellEdit: false, 
     width: '10%' 
    }, 
    { name: 'name', 
     displayName: 'Name', 
     width: '20%', 
     validators: { 
     required: true, 
     startWith: 'M' 
     }, 
     cellTemplate: 'ui-grid/cellTitleValidator' 
    }, 
    { name: 'gender', 
     displayName: 'Gender', 
     width: '20%', 
     validators: { 
     required: true 
     }, 
     cellTemplate: 'ui-grid/cellTitleValidator' 
    } 
    ];

來源

2016-01-24 lightswitch05

如果您需要爲新行或現有行執行此操作，您可以手動設置無效狀態。

uiGridValidateService.setInvalid(dataRow, coldef);

可以使用得到colDef：

$scope.gridApi.grid.getColDef("columnName")

來源

2016-03-21 16:22:47

爲了支持第二塞納里奧你應該添加自定義onRegisterApi聽衆在裏面添加上呈現的聽衆，然後運行驗證程序呈現這樣的每一行的行：

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    $scope.gridApi.core.on.rowsRendered($scope, function() { 
     $interval(function() { 
      var rowsRendred = $scope.gridApi.grid.renderContainers.body.renderedRows; 
      rowsRendred.forEach(function (row) { 
       row.grid.options.columnDefs.forEach(function (colDef) { 
        $scope.gridApi.grid.validate.runValidators(row.entity, colDef, row.entity[colDef.field], NaN, $scope.gridApi.grid); 
       }); 
      }); 
     }, 500, 1); 
    }); 
};

來源

2016-03-22 19:27:00

這類似於Afifa的答案，但更高的性能，當你的許多列不進行驗證：

將以下內容添加到您的onRegisterApi：

$scope.gridApi.core.on.rowsRendered($scope, function() { 
       $interval(function() { 
        var rowsRendred = 
    $scope.gridApi.grid.renderContainers.body.renderedRows; 
        var validatedColumns = []; 
        rowsRendred[0].grid.options.columnDefs.forEach(function (colDef) { 
         if (typeof (colDef.validators) != 'undefined') { 
          validatedColumns.push(colDef); 
         } 
        }); 
        rowsRendred.forEach(function (row) { 
         validatedColumns.forEach(function (colDef) { 

$scope.gridApi.grid.validate.runValidators(row.entity, colDef, row.entity[colDef.field], NaN, $scope.gridApi.grid); 
         }); 
        }); 
       }, 500, 1); 
      });

來源

2017-11-17 14:08:37

沒有編輯的角度UI網格驗證

回答

相關問題