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 849f02be658ce0db43edddab63300a95257832b2..8f04b99958c246ab4a55e9e403b8dde8795c27e9 100644 (file)
--- 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 cc7b923f6321b6f07882e8cc06b8fa9be4996024..9fcbb44e59534850ce74c8169c9c2a40ef21aeef 100644 (file)
--- 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 fc0846b35766cd24d5ebfc18b2f81d96bb1819b9..3edf3669ba057f1bf064d85773b1d41e8319eb12 100644 (file)
--- 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.`
+  //          }
   //    }
   //    ...
   // }