ag-grid 单元格渲染器单元格验证答案

【问题标题】：ag-grid cell renderer cell validationag-grid 单元格渲染器单元格验证
【发布时间】：2018-02-13 09:35:22
【问题描述】：

我尝试在 ag-grid 单元格渲染器中进行单元格验证。

我无法做到这一点。

以下是我的代码示例。

columns = [
                    { headerName: "Sequence", field: "domainDetailSeq", cellRendererFramework: GridInputComponent },
                    { headerName: "Detail Id", field: "domainDetailId", cellRendererFramework: GridInputComponent }
                ]

这是单元格渲染器组件。

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular/main";

@Component({
    selector: 'child-cell',
    template: `<div fxLayout="row" class="grid-actions">
           <input required type="text" (blur)="invokeParentMethod($event)" [value]="params.value" [hidden]="params.data.createdBy && params.colDef.field==='domainDetailId'">
            <span [hidden]="!params.data.createdBy" *ngIf="params.colDef.field==='domainDetailId'">{{params.value}}</span>
        </div>`
})
export class GridInputComponent implements ICellRendererAngularComp {
    public params: any;

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

    public invokeParentMethod($event: MouseEvent, mode: string) {
        $event.preventDefault();
        this.params.context.componentParent.update(this.params, $event);
    }
}

我在主页上有一个提交按钮，点击后，我需要执行所需的验证并在那里显示所需的消息。

任何建议都将不胜感激。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

您可以在网格字段中使用cellClassRules属性来实现：

configuration.cellClassRules:{'required-class':(params)=>{return <condition>}}

【讨论】：