@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/models/fields/input/input-field.model.ts

@@ -0,0 +1,111 @@
+import { FormControl, ValidatorFn, Validators } from '@angular/forms';
+import { INPUT_FIELD_TYPES } from '../../../consts/fields/input-field.const';
+import { BaseField } from '../field.model';
+import { noLeadingSpaceValidator } from '../../../utils/validators/custom-validators';
+import { resolvePattern } from '../../../utils/validators/pattern';
+import { CommonValidaterEnum, CustomValidaterEnum } from '../../../enums/validators';
+import {
+  getDefaultMaxLengthErrorMessage,
+  getDefaultMinLengthErrorMessage,
+  getDefaultPatternErrorMessage,
+  getLeadingSpaceErrorMessage,
+} from '../../../utils/validators';
+import { ControlTypeEnum } from '../../../enums/controls';
+import { Suffix } from '../../common/common.model';
+
+/**
+ * typeof FIELD_TYPES[number] có nghĩa là:
+    - INPUT_FIELD_TYPES là readonly ['text','email','password','number']
+    - INPUT_FIELD_TYPES[number] = INPUT_FIELD_TYPES[0] | INPUT_FIELD_TYPES[1] | ... = 'text' | 'email' | ...
+    => FieldType = 'input' | 'select' | 'checkbox'
+*/
+export type InputFieldType = (typeof INPUT_FIELD_TYPES)[number];
+
+const DEFAULT_INPUT_VALUE = '';
+
+/**
+ * Interface base chung cho Các dạng Input Field.
+ */
+export abstract class InputBaseField extends BaseField<string> {
+  suffixes: Suffix[];
+
+  /**
+   * Props validation chung cho các dạng Input.
+   */
+  // Độ dài tối thiểu của chuỗi nhập vào.
+  minLength?: number;
+  // Độ dài tối đa của chuỗi nhập vào.
+  maxLength?: number;
+  // Theo mẫu regex hoặc đối tượng RegExr
+  pattern?: string | RegExp;
+
+  isCurrency: boolean;
+
+  constructor(init: Partial<InputBaseField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Input.
+     */
+    this.controlType = ControlTypeEnum.Input;
+    this.value = DEFAULT_INPUT_VALUE;
+    this.initialValue = DEFAULT_INPUT_VALUE;
+    this.suffixes = [];
+    this.isCurrency = false;
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Input.
+  protected getInputCommonValidators(): ValidatorFn[] {
+    const validators = this.getCommonValidators();
+
+    if (this.minLength) validators.push(Validators.minLength(this.minLength));
+    if (this.maxLength) validators.push(Validators.maxLength(this.maxLength));
+    if (this.pattern) {
+      const resolvePatternResult = resolvePattern(this.pattern);
+      if (resolvePatternResult?.type !== 'unknown')
+        validators.push(Validators.pattern(resolvePatternResult.value));
+    }
+
+    return validators;
+  }
+
+  // Mảng ValidatorFn các custom validation có thể dùng cho Input.
+  protected getInputCustomValidators(): ValidatorFn[] {
+    const validators = this.getCustomValidators();
+
+    validators.push(noLeadingSpaceValidator());
+
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getInputCommonValidators();
+    const customValidators = this.getInputCustomValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+
+  // Giá trị mặc định.
+  override getDefaultValue(): string {
+    return DEFAULT_INPUT_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string {
+    return String(modelValue);
+  }
+
+  override getErrorMessage(errorKey: string, errorValue: any, allFields: BaseField<any>[]): string {
+    if (errorKey === CommonValidaterEnum.Pattern) {
+      if (this.pattern) return getDefaultPatternErrorMessage(this.label, this.pattern);
+    }
+    if (errorKey === CommonValidaterEnum.MinLength)
+      return getDefaultMinLengthErrorMessage(this.label, errorValue);
+    if (errorKey === CommonValidaterEnum.MaxLength)
+      return getDefaultMaxLengthErrorMessage(this.label, errorValue);
+    if (errorKey === CustomValidaterEnum.LeadingSpace)
+      return getLeadingSpaceErrorMessage(this.label);
+    return super.getErrorMessage(errorKey, errorValue, allFields);
+  }
+}

package/src/lib/shared/models/fields/input/input-formatted-field.model.ts

@@ -0,0 +1,38 @@
+import { FormControl } from "@angular/forms";
+import { FieldTypeEnum } from "../../../enums/fields";
+import { InputBaseField } from "./input-field.model";
+import { NumericPreset } from "../../../enums/fields/input-formatted-field.enum";
+import AutoNumeric from "@zeedhi/autonumeric";
+
+/**
+ * Interface của Input Field dạng format.
+ */
+export class InputFormattedField extends InputBaseField {
+  // Kiểu định dạng số.
+  format: NumericPreset;
+
+  // Option cho autoNumeric. Có thê custom với dạng format là custom và truyền options từ ngoài vào.
+  autoNumericOptions?: Partial<AutoNumeric.Options>;
+
+  constructor(init: Partial<InputFormattedField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở InputFormatted.
+     */
+    this.type = FieldTypeEnum.InputFormatted;
+    this.format = NumericPreset.Integer;
+
+    Object.assign(this, init);
+  }
+
+  // Tạo Form Control cho Input Formatted Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getInputCommonValidators();
+    const customValidators = this.getInputCustomValidators();
+    return new FormControl(this.value ?? "", [
+      ...commonValidators,
+      ...customValidators,
+    ]);
+  }
+}

package/src/lib/shared/models/fields/input/input-password-field.model.ts

@@ -0,0 +1,38 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { FieldTypeEnum, InputFieldTypeEnum } from '../../../enums/fields';
+import { InputBaseField } from './input-field.model';
+
+/**
+ * Interface của Input Field type là Password.
+ */
+export class InputPasswordField extends InputBaseField {
+  constructor(init: Partial<InputPasswordField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Input Password.
+     */
+    this.type = FieldTypeEnum.InputPassword;
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Input Password.
+  protected getInputPasswordCommonValidators(): ValidatorFn[] {
+    const validators = this.getInputCommonValidators();
+    return validators;
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
+  protected getInputPasswordCustomValidators(): ValidatorFn[] {
+    const validators = this.getInputCustomValidators();
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Password Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getInputPasswordCommonValidators();
+    const customValidators = this.getInputPasswordCustomValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+}

package/src/lib/shared/models/fields/input/input-text-field.model.ts

@@ -0,0 +1,26 @@
+import { FormControl } from '@angular/forms';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { InputBaseField } from './input-field.model';
+
+/**
+ * Interface của Input Field type là Text.
+ */
+export class InputTextField extends InputBaseField {
+  constructor(init: Partial<InputTextField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Input Text.
+     */
+    this.type = FieldTypeEnum.InputText;
+
+    Object.assign(this, init);
+  }
+
+  // Tạo Form Control cho Input Text Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getInputCommonValidators();
+    const customValidators = this.getInputCustomValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+}

package/src/lib/shared/models/fields/radio/radio-base-field.model.ts

@@ -0,0 +1,84 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import {
+  DEFAULT_BIND_LABEL,
+  DEFAULT_BIND_VALUE,
+  SELECT_FIELD_TYPES,
+} from '../../../consts/fields/select-field.const';
+import { BaseField } from '../field.model';
+import { ApiConfig, FieldDependency } from '../../common';
+import { SelectOutputValueType } from '../../common/output-value-type.model';
+import { SelectOutputValueTypeEnum } from '../../../enums/common';
+import { ControlTypeEnum } from '../../../enums/controls';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { RADIO_FIELD_TYPES } from '../../../consts/fields/radio-field.const';
+
+export type RadioFieldType = (typeof RADIO_FIELD_TYPES)[number];
+
+/**
+ * Interface base chung cho Các dạng Radio.
+ */
+export abstract class RadioBaseField<K, TOptions = Record<string, unknown>> extends BaseField<K> {
+  // Key lấy ra nhãn hiển thị ở options.
+  bindLabel!: string;
+
+  // Key lấy ra giá trị ngầm ở options.
+  bindValue!: string;
+
+  // Mảng options cho việc lựa chọn được truyền tĩnh từ config.
+  options?: TOptions[];
+
+  // Cấu hình api nếu danh sách select dựa vào việc gọi api GET. Ưu tiên hơn options tĩnh truyền vào từ config.
+  apiConfig?: ApiConfig;
+
+  // Phụ thuộc vào một giá trị từ bất kỳ dạng field nào khác: Select, Input,...
+  dependsOn?: FieldDependency[];
+
+  // Biến đổi hiển thị option label từ option của options.
+  transformLabel?: (option: TOptions) => string;
+
+  /**
+   * Props validation chung cho các dạng Radio.
+   */
+  // ................. Chưa có .................
+
+  constructor(init: Partial<RadioBaseField<K, TOptions>>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Radio.
+     */
+    this.controlType = ControlTypeEnum.Radio;
+    this.bindLabel = DEFAULT_BIND_LABEL;
+    this.bindValue = DEFAULT_BIND_VALUE;
+    this.dependsOn = [];
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Radio.
+  protected getCommonSelectValidators(): ValidatorFn[] {
+    const validators = this.getCommonValidators();
+    return validators;
+  }
+
+  // Mảng ValidatorFn các custom validation có thể dùng cho Radio.
+  protected getCustomSelectValidators(): ValidatorFn[] {
+    const validators = this.getCustomValidators();
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getCommonSelectValidators();
+    const customValidators = this.getCustomSelectValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+
+  abstract override getDefaultValue(): K;
+
+  abstract override toFormValue(modelValue: K): K;
+
+  override getErrorMessage(errorKey: string, errorValue: any, allFields: BaseField<any>[]): string {
+    return super.getErrorMessage(errorKey, errorValue, allFields);
+  }
+}

package/src/lib/shared/models/fields/select/multi-select-field.model.ts

@@ -0,0 +1,46 @@
+import { FieldTypeEnum } from '../../../enums/fields';
+import { SelectBaseField } from './select-base-field.model';
+
+const DEFAULT_MULTI_SELECT_VALUE: string[] = [];
+
+/**
+ * Interface của Select Field type là dạng Multi.
+ */
+export class MultiSelectField extends SelectBaseField<string[] | Record<string, unknown>[]> {
+  // Số lựa chọn (option) sẽ được hiển thị khi người dùng chọn nhiều.
+  maxTagCount?: number;
+  maxMultipleCount?: number;
+
+  constructor(init: Partial<MultiSelectField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Multi Select.
+     */
+    this.type = FieldTypeEnum.MultiSelect;
+    this.value = DEFAULT_MULTI_SELECT_VALUE;
+    this.initialValue = DEFAULT_MULTI_SELECT_VALUE;
+    this.maxTagCount = 53;
+    this.maxMultipleCount = Infinity;
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string[] | Record<string, unknown>[] {
+    return DEFAULT_MULTI_SELECT_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string[] | Record<string, unknown>[] {
+    const value = modelValue as string[] | Record<string, unknown>[];
+
+    const optionsValue = value!.map((val: string | number | Record<string, unknown>) => {
+      if (typeof val === 'object') {
+        let transformVal = (val?.[this.bindValue] as string) ?? '';
+        return transformVal;
+      }
+      return val as string;
+    });
+
+    return optionsValue;
+  }
+}

package/src/lib/shared/models/fields/select/select-base-field.model.ts

@@ -0,0 +1,125 @@
+import { FormControl, ValidatorFn } from "@angular/forms";
+import {
+  DEFAULT_BIND_LABEL,
+  DEFAULT_BIND_VALUE,
+  SELECT_FIELD_TYPES,
+} from "../../../consts/fields/select-field.const";
+import { BaseField } from "../field.model";
+import { ApiConfig, FieldDependency, FieldDependencyType } from "../../common";
+import { SelectOutputValueType } from "../../common/output-value-type.model";
+import {
+  DependTypeEnum,
+  SelectOutputValueTypeEnum,
+} from "../../../enums/common";
+import { ControlTypeEnum } from "../../../enums/controls";
+import { Suffix } from "../../common/common.model";
+
+export type SelectFieldType = (typeof SELECT_FIELD_TYPES)[number];
+
+/**
+ * Interface base chung cho Các dạng Input Field.
+ */
+export abstract class SelectBaseField<K> extends BaseField<K> {
+  // Key lấy ra nhãn hiển thị ở options.
+  bindLabel!: string;
+
+  // Key lấy ra giá trị ngầm ở options.
+  bindValue!: string;
+
+  // Dữ liệu sẽ gửi từ form khi submit.
+  outputAs!: SelectOutputValueType;
+
+  matchSelectWidth: boolean;
+
+  // Mảng options cho việc lựa chọn được truyền tĩnh từ config.
+  options: Record<string, unknown>[];
+
+  // Luôn chèn vào vị trí 0
+  optionsToPrepend: Record<string, unknown>[];
+
+  // Luôn chèn vào vị trí cuối
+  optionsToAppend: Record<string, unknown>[];
+
+  exceptOptions: Record<string, unknown>[];
+
+  // Phụ thuộc vào một giá trị từ bất kỳ dạng field nào khác: Select, Input,...
+  dependsOn: FieldDependency[];
+
+  // Cấu hình api nếu danh sách select dựa vào việc gọi api GET. Ưu tiên hơn options tĩnh truyền vào từ config.
+  apiConfig?: ApiConfig;
+
+  /**
+   * dependType:
+   * - 'all'  → cần tất cả field cha có giá trị mới gọi API
+   * - 'any'  → chỉ cần 1 field cha có giá trị cũng gọi API theo từng cha
+   */
+
+  dependType: FieldDependencyType;
+
+  // Biến đổi hiển thị option label từ option của options.
+  transformLabel?: (option: Record<string, unknown>) => string;
+
+  // Các nút nằm ở hậu tố (bên phải control).
+  suffixes: Suffix[];
+
+  /**
+   * Props validation chung cho các dạng Select.
+   */
+  // ................. Chưa có .................
+
+  constructor(init: Partial<SelectBaseField<K>>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Select.
+     */
+    this.controlType = ControlTypeEnum.Select;
+    this.bindLabel = DEFAULT_BIND_LABEL;
+    this.bindValue = DEFAULT_BIND_VALUE;
+    this.matchSelectWidth = true;
+    this.outputAs = SelectOutputValueTypeEnum.Object;
+    this.dependsOn = [];
+    this.dependType = DependTypeEnum.All;
+    this.suffixes = [];
+    this.optionsToPrepend = [];
+    this.optionsToAppend = [];
+    this.options = [];
+    this.exceptOptions = [];
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Select.
+  protected getCommonSelectValidators(): ValidatorFn[] {
+    const validators = this.getCommonValidators();
+    return validators;
+  }
+
+  // Mảng ValidatorFn các custom validation có thể dùng cho Select.
+  protected getCustomSelectValidators(): ValidatorFn[] {
+    const validators = this.getCustomValidators();
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getCommonSelectValidators();
+    const customValidators = this.getCustomSelectValidators();
+    return new FormControl(this.value ?? "", [
+      ...commonValidators,
+      ...customValidators,
+    ]);
+  }
+
+  abstract override getDefaultValue(): K;
+
+  abstract override toFormValue(modelValue: unknown): K;
+
+  override getErrorMessage(
+    errorKey: string,
+    errorValue: any,
+    allFields: BaseField<any>[],
+  ): string {
+    return super.getErrorMessage(errorKey, errorValue, allFields);
+  }
+}

package/src/lib/shared/models/fields/select/single-select-field.model.ts

@@ -0,0 +1,43 @@
+import { FieldTypeEnum } from '../../../enums/fields';
+import { SelectBaseField } from './select-base-field.model';
+
+const DEFAULT_SINGLE_SELECT_VALUE = null;
+
+/**
+ * Interface của Select Field type là dạng Single.
+ */
+export class SingleSelectField extends SelectBaseField<string | Record<string, unknown> | null> {
+  constructor(init: Partial<SingleSelectField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Single Select.
+     */
+    this.type = FieldTypeEnum.SingleSelect;
+    this.value = DEFAULT_SINGLE_SELECT_VALUE;
+    this.initialValue = DEFAULT_SINGLE_SELECT_VALUE;
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | Record<string, unknown> | null {
+    return DEFAULT_SINGLE_SELECT_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string | Record<string, unknown> | null {
+    if (!modelValue) return null;
+    const value = modelValue as string | Record<string, unknown>;
+
+    if (typeof value === 'object') {
+      const valueFromObj = value?.[this.bindValue];
+      const typeOfValueFromObj = typeof valueFromObj;
+      if (typeOfValueFromObj !== 'object') return String(valueFromObj);
+      else {
+        console.warn('Từ bindValue nhưng đối tượng vẫn là dạng object');
+        return '';
+      }
+    }
+
+    return String(value);
+  }
+}

package/src/lib/shared/models/fields/select/tree-select-field.model.ts

@@ -0,0 +1,44 @@
+import { FieldTypeEnum } from '../../../enums/fields';
+import { SelectBaseField } from './select-base-field.model';
+
+const DEFAULT_TREE_SELECT_VALUE = null;
+
+/**
+ * Interface của Select Field type là dạng Single.
+ */
+export class TreeSelectField extends SelectBaseField<string | Record<string, unknown> | null> {
+  groupBy?: string;
+  constructor(init: Partial<TreeSelectField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Single Select.
+     */
+    this.type = FieldTypeEnum.TreeSelect;
+    this.value = DEFAULT_TREE_SELECT_VALUE;
+    this.initialValue = DEFAULT_TREE_SELECT_VALUE;
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | Record<string, unknown> | null {
+    return DEFAULT_TREE_SELECT_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string | Record<string, unknown> | null {
+    if (!modelValue) return null;
+    const value = modelValue as string | Record<string, unknown>;
+
+    if (typeof value === 'object') {
+      const valueFromObj = value?.[this.bindValue];
+      const typeOfValueFromObj = typeof valueFromObj;
+      if (typeOfValueFromObj !== 'object') return String(valueFromObj);
+      else {
+        console.warn('Từ bindValue nhưng đối tượng vẫn là dạng object');
+        return '';
+      }
+    }
+
+    return String(value);
+  }
+}

package/src/lib/shared/models/fields/textarea/textarea-field.model.ts

@@ -0,0 +1,97 @@
+import { FormControl, ValidatorFn, Validators } from '@angular/forms';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { BaseField } from '../field.model';
+import {
+  getDefaultMaxLengthErrorMessage,
+  getDefaultMinLengthErrorMessage,
+  getDefaultPatternErrorMessage,
+  getLeadingSpaceErrorMessage,
+  noLeadingSpaceValidator,
+  resolvePattern,
+} from '../../../utils/validators';
+import { CommonValidaterEnum, CustomValidaterEnum } from '../../../enums/validators';
+import { ControlTypeEnum } from '../../../enums/controls';
+
+const DEFAULT_TEXTAREA_VALUE = '';
+
+/**
+ * Interface cho Các dạng Textarea.
+ */
+export class TextareaField extends BaseField<string> {
+  /**
+   * Props validation chung cho dạng Textarea.
+   */
+  // Độ dài tối thiểu của chuỗi nhập vào.
+  minLength?: number;
+  // Độ dài tối đa của chuỗi nhập vào.
+  maxLength?: number;
+  // Theo mẫu regex hoặc đối tượng RegExr
+  pattern?: string | RegExp;
+
+  constructor(init: Partial<TextareaField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Input.
+     */
+    this.controlType = ControlTypeEnum.Textarea;
+    this.type = FieldTypeEnum.Textarea;
+    this.value = DEFAULT_TEXTAREA_VALUE;
+    this.initialValue = DEFAULT_TEXTAREA_VALUE;
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi Reactive form của angular cho Input.
+  protected getCommonTextareaValidators(): ValidatorFn[] {
+    const validators = this.getCommonValidators();
+
+    if (this.minLength) validators.push(Validators.minLength(this.minLength));
+    if (this.maxLength) validators.push(Validators.maxLength(this.maxLength));
+    if (this.pattern) {
+      const resolvePatternResult = resolvePattern(this.pattern);
+      if (resolvePatternResult?.type !== 'unknown')
+        validators.push(Validators.pattern(resolvePatternResult.value));
+    }
+
+    return validators;
+  }
+
+  // Mảng ValidatorFn các custom validation có thể dùng cho Input.
+  protected getCustomTextareaValidators(): ValidatorFn[] {
+    const validators = this.getCustomValidators();
+
+    validators.push(noLeadingSpaceValidator());
+
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getCommonTextareaValidators();
+    const customValidators = this.getCustomTextareaValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+
+  // Giá trị mặc định.
+  override getDefaultValue(): string {
+    return DEFAULT_TEXTAREA_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string {
+    return String(modelValue);
+  }
+
+  override getErrorMessage(errorKey: string, errorValue: any, allFields: BaseField<any>[]): string {
+    if (errorKey === CommonValidaterEnum.Pattern) {
+      if (this.pattern) return getDefaultPatternErrorMessage(this.label, this.pattern);
+    }
+    if (errorKey === CommonValidaterEnum.MinLength)
+      return getDefaultMinLengthErrorMessage(this.label, errorValue);
+    if (errorKey === CommonValidaterEnum.MaxLength)
+      return getDefaultMaxLengthErrorMessage(this.label, errorValue);
+    if (errorKey === CustomValidaterEnum.LeadingSpace)
+      return getLeadingSpaceErrorMessage(this.label);
+    return super.getErrorMessage(errorKey, errorValue, allFields);
+  }
+}