From: Nizamudeen A <nia@redhat.com>
Date: Wed, 8 Oct 2025 10:29:36 +0000 (+0530)
Subject: mgr/dashboard: support custom validator messages in inline edit
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=7ced3abd895807dc5bcf0c0f9c3bcccbe501c2e3;p=ceph.git

mgr/dashboard: support custom validator messages in inline edit

we can add custom messages to the customTemplate like
```

        name: $localize`Name`,
        prop: 'name',
        flexGrow: 2,
        cellTemplate: this.removingStatTpl,
        cellTransformation: CellTemplate.editing,
        customTemplateConfig: {
          validators: [Validators.required, Validators.pattern(/^[A-Za-z ]+$/)],
          errorMessages: {
            required:  $localize`This field is required.`,
            pattern: $localize`The field format is invalid.`
          }
        }
      },
```

also extend support for async validator

Signed-off-by: Nizamudeen A <nia@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 849f02be658c..8f04b99958c2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -426,12 +426,12 @@
                  [invalid]="formGroup.controls[row?.[identifier] + '-' + column?.prop]?.invalid && formGroup.controls[row?.[identifier] + '-' + column?.prop]?.dirty">
         </cds-text-label>
         <ng-template #errorTpl>
-          <span *ngIf="formGroup?.showError(row?.[identifier] + '-' + column?.prop, formDir, 'required')">
-            <ng-container i18n>This field is required.</ng-container>
-          </span>
-          <span *ngIf="column?.customTemplateConfig?.formGroup?.showError(row?.[identifier] + '-' + column?.prop, formDir, 'pattern')">
-            <ng-container i18n>The field format is invalid.</ng-container>
-          </span>
+          @for (errorKey of formGroup?.get(row?.[identifier] + '-' + column?.prop)?.errors | keyvalue; track $index) {
+          @if (formGroup?.showError(row?.[identifier] + '-' + column?.prop, formDir, errorKey.key)) {
+          <ng-container i18n>
+            {{ column.customTemplateConfig?.errorMessages?.[errorKey.key] || ('Invalid ' + column.name) }}
+          </ng-container>
+          }}
         </ng-template>
       </div>
       <div cdsCol
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index cc7b923f6321..9fcbb44e5953 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -1399,7 +1399,13 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
 
   editCellItem(rowId: string, column: CdTableColumn, value: string) {
     const key = `${rowId}-${column.prop}`;
-    this.formGroup.addControl(key, new FormControl('', column.customTemplateConfig?.validators));
+    this.formGroup.addControl(
+      key,
+      new FormControl('', {
+        validators: column.customTemplateConfig?.validators || [],
+        asyncValidators: column.customTemplateConfig?.asyncValidators || []
+      })
+    );
     this.editingCells.add(key);
     if (!this.editStates[rowId]) {
       this.editStates[rowId] = {};
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
index fc0846b35766..3edf3669ba05 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -87,7 +87,12 @@ export enum CellTemplate {
   //    ...
   //    cellTransformation: CellTemplate.editing,
   //    customTemplateConfig: {
-  //       validators: [Validators.required]
+  //          validators: [Validators.required, Validators.pattern(/^[A-Za-z ]+$/)],
+  //          asyncValidators: [AsyncValidator]
+  //          errorMessages: {
+  //            required:  $localize`This field is required.`,
+  //            pattern: $localize`The field format is invalid.`
+  //          }
   //    }
   //    ...
   // }