在单元格值更改之前验证？答案

【问题标题】：Validate before cell value changed?在单元格值更改之前验证？
【发布时间】：2021-09-08 15:06:17
【问题描述】：

我有这个网格选项：

gridOptions: GridOptions = {
    suppressFieldDotNotation: true,
    paginationAutoPageSize: false,
    paginationPageSize: 10,
    domLayout: 'autoHeight',
    rowMultiSelectWithClick: false,
    rowSelection: 'multiple',
    onFilterChanged: (event) => this.onFilterChanged(event),
    onCellValueChanged: (event) => this.onCellValueChanged(event)
  } as GridOptions;

在单元格值上我有这个：

  onCellValueChanged(event) {

    if (typeof event.newValue === 'string') {
      this.toastrService.error(event.newValue + ' is not a number!');
      return;
    }
}

只有一列是可编辑的，我想要的是用户输入一些不是数字或小数的值，例如 (1, 1.1, 1,1)，我将该列设置为零，并显示消息。

我试过这样，但它显示十进制值 1.1 和 1,2（带点和逗号）的验证消息，另一个问题是如果验证为假，我不知道如何将该行上的列设置为零。

有什么建议吗？

【问题讨论】：

您是否尝试更改 onCellValueChanged(event) 函数的值。您可以使用 event.data[field]=0 命令设置零

标签： angular ag-grid ag-grid-angular

【解决方案1】：

不幸的是，没有直接的配置属性可以做到这一点。

我们必须创建一个新的单元格编辑器组件并将其注册到 columnDefs 中的列。

类似这样的：在此示例中，我们可以通过三种方式操作数据。

这里，首先，由于输入类型是数字，所以只能输入数字将被允许。
如果您不想这样做，请检查输入值是否为号码与否。如果不是，则分配零。

第三，不正确的值不要编辑。

import {
 AfterViewInit,
 Component,
 ViewChild,
 ViewContainerRef,
 } from '@angular/core';
 import { AgEditorComponent } from 'ag-grid-angular';

 @Component({
 selector: 'editor-cell',
 template: `<input
   type="number"  #########check1
   [(ngModel)]="value"
   #input
   style="width: 100%"
 />`,
 })
 export class PercentageCellEditor implements AgEditorComponent, AfterViewInit {
 private params: any;
 public value: number;

 @ViewChild('input', { read: ViewContainerRef })
 public input: ViewContainerRef;

 ngAfterViewInit() {
     // focus on the input
     setTimeout(() => this.input.element.nativeElement.focus());
 }

 agInit(params: any): void {
     this.params = params;
 }

 /* Component Editor Lifecycle methods */
 // the final value to send to the grid, on completion of editing
 getValue() {
     // check2
     this.value = !Number.isNaN(parseFloat(this.params.value)) ? parseFloat(this.params.value) : 0;
     return this.value;
 }

 // Gets called once before editing starts, to give editor a chance to
 // cancel the editing before it even starts.
 isCancelBeforeStart() {
     return false;
 }

 // Gets called once when editing is finished (eg if enter is pressed).
 // If you return true, then the result of the edit will be ignored.
 isCancelAfterEnd() {
     // check3
     return (this.value < 0 || this.value >= 100);
 }
 }

组件：

在grid的frameworkComponents中注册。

this.frameworkComponents = {
        percentageEditor: PercentageCellEditor
    }

将其添加到 columnDefs：

           {
                headerName: "Column Name",
                field: "columnFieldName",
                editable: true,
                cellEditor: "percentageEditor",
            }

【讨论】：

【解决方案2】：

使用Value Setters 进行基本验证，如本例所示：https://plnkr.co/edit/lRxzoiYSAjtsOAKX

如果输入的值不是数字或大于 100，则不会保存到网格并显示警告：

        valueSetter: (params) => {
          if (isNaN(params.newValue)) {
            alert('not valid number');
            return false;
          }

          if (params.newValue > 100) {
            alert('input is larger than 100');
            return false;
          } else {
            params.data.numberGood = params.newValue;
            return true;
          }
        },

【讨论】：

【解决方案3】：

您可以使用valueSetter：

{
      headerName: 'Role',
      field: 'role',
      editable: true,
      valueSetter: (ev: CellValueChangedEvent) => {
        if (ev.newValue.role !== 'Valid') {
          alert('not valid role');
          return false;
        } else {
          return true;
        }
      },
      onCellValueChanged: (ev) => this.submitRole(ev)
  }

【讨论】：