如何向始终可编辑的列 Syncfusion Angular 添加验证

Question

我正在使用同步融合网格。 将 editSettings 设置为 true 可以在双击时编辑列。但我希望单元格始终可编辑。因此，我使用了要编辑的列的模板。但现在我无法对可编辑列使用验证。

将模板制作为syncfusion TextBox也不起作用

Answer 1

您可以添加自定义验证器组件来进行验证。

1. 创建自定义编辑器组件： 您将创建一个自定义 Angular 组件，用作可编辑列的编辑器。该组件将处理输入和验证逻辑。

2. 将自定义编辑器集成到网格中： 在模板中使用自定义编辑器组件来创建您想要使其始终可编辑的列。

3. 在自定义编辑器组件中实现验证： 利用 Angular 的验证功能或自定义编辑器组件中的任何自定义验证逻辑。

例如：

  <!-- grid.component.html -->
  <ejs-grid [dataSource]="data" allowPaging="true">
     <e-columns>
         <e-column field="name" headerText="Name">
             <ng-template #template let-data>
                 <app-custom-editor [(ngModel)]="data.name"></app-custom-editor>
             </ng-template>
         </e-column>
         <!-- Other columns -->
     </e-columns>
 </ejs-grid>

自定义编辑器组件会是这样的

// custom-editor.component.ts
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-custom-editor',
  template: `
    <input type="text" [(ngModel)]="value" (input)="onInput()" />
    <div *ngIf="error" class="error">{{ error }}</div>
  `,
  styleUrls: ['./custom-editor.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomEditorComponent),
      multi: true
    }
  ]
})
export class CustomEditorComponent implements ControlValueAccessor {
  value: any;
  error: string | null = null;

  // Implementing ControlValueAccessor interface
  onChange: any = () => {};
  onTouch: any = () => {};

  constructor() { }

  // Set value programmatically
  writeValue(value: any) {
    this.value = value;
  }

  // Listen to changes and propagate them
  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  // Listen to touch events
  registerOnTouched(fn: any) {
    this.onTouch = fn;
  }

  // Update value and perform validation
  onInput() {
    // Perform validation here
    if (!this.isValid(this.value)) {
      this.error = 'Invalid input';
    } else {
      this.error = null;
    }

    // Propagate value to parent form
    this.onChange(this.value);
  }

  // Custom validation logic
  isValid(value: any): boolean {
    // Implement your validation logic here
    return value !== null && value !== undefined && value !== '';
  }
}