@ldquocc/dynamic-form 0.0.3 → 0.0.4

package/fesm2022/ldquocc-dynamic-form.mjs

@@ -1,11 +1,11 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, untracked, input, computed, Input, Directive, effect, forwardRef, Component, EventEmitter, output, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { of, delay, Subject, takeUntil, finalize, Observable, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$2 from '@angular/common';
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, untracked, input, computed, Input, Directive, effect, forwardRef, Component, EventEmitter, output, Output } from '@angular/core';
 import * as i3$3 from 'ng-zorro-antd/form';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { isEqual } from 'lodash-es';
@@ -42,14 +42,6 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 import * as i4$2 from 'ng-zorro-antd/collapse';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 
-var FormModeEnum;
-(function (FormModeEnum) {
-    FormModeEnum["Add"] = "add";
-    FormModeEnum["Edit"] = "edit";
-    FormModeEnum["View"] = "view";
-    FormModeEnum["Design"] = "design";
-})(FormModeEnum || (FormModeEnum = {}));
-
 // Core Angular modules (cần thiết ở hầu hết các component).
 const CORE_MODULES = [CommonModule];
 // Form handling (thường dùng với Reactive)
@@ -568,6 +560,241 @@ class DateRangeField extends BaseDateField {
     }
 }
 
+// Các patterns regex thường dùng trong ứng dụng
+const PATTERN_PRESETS = {
+    alpha: '^[a-zA-Z]+$',
+    alphaNumeric: '^[a-zA-Z0-9]+$',
+    name: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\()]+$",
+    username: '^[a-z0-9_.s]+$',
+    regexPostCode: '^[a-zA-Z0-9-s]+$',
+    alphaDash: '^[a-zA-Z0-9_-s.]+$',
+    alphaVN: '^[a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\,s]+$',
+    alphaNumericVN: '^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\s]+$',
+    alphaDashVN: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\()]+$",
+    unitName: '^[a-zA-Z0-9 ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹs_-]+$',
+    date: '([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))',
+    time: '(?=[01]\\d|2[0123])=(?=[012345]\\d)=(?=[012345]\\d)',
+    dateTime: '[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9])=[0-5][0-9]=[0-5][0-9]',
+    // dateV: "^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4}$",
+    // dateV: /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-](19|20)\d\d/,
+    // dateV: "^([0-2][0-9]|(3)[0-1])(\-)(((0)[0-9])|((1)[0-2]))(\-)\d{4}$",
+    dateVN: '^(?=0[1-9]|[12]d|3[01])([/.-])(?=0[1-9]|1[012])\\1(?=19|20)dd$',
+    dateTimeVN: '^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})=(\\d{2})$',
+    dateShortTimeVN: '^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})$',
+    integer: '^\\-?[0-9]+$',
+    decimal: '^\\-?[0-9]*\\.?[0-9]+$',
+    ipAddress: '^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$',
+    base64: '[^a-zA-Z0-9\\/\\+=]',
+    citizenId: '^\\d{12}$',
+    passport: '^[A-Z0-9]{6,12}$', //  Hộ chiếu - 6-12 ký tự (chữ IN HOA và số)
+    // dnkhcn: "/^DNKHCN-[A-Z]{2}-d{4}$/",
+    // msdn: "/^d{10}$/",
+    intergerNotZero: '^[0-9]*[1-9][0-9]*$',
+    //link: "(https?=//(?=www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|https?=//(?=www.|(?!www))[a-zA-Z0-9]+.[^s]{2,}|www.[a-zA-Z0-9]+.[^s]{2,})",
+    // code: "^['A-Z''0-9''._\\-']*$",
+    code: "^['A-Z''0-9''./_\\-\\/\\Đ']*$",
+    codeHsda: "^['A-Z''0-9''./_\\-']*$",
+    link_location: '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})([/\\w .-]*)?(\\?[\\w=&,.%-]*)?',
+    link: '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?',
+    //password: "/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&]).{8,}/",
+    accountName: '^[a-zA-Z0-9_.]{2,20}$',
+    name_or_fullName: '^[a-zA-Z0-9_ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễếệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ ]{1,20}$',
+    packageName: '^(?:[a-zA-Z]+(?:d*[a-zA-Z_]*)*)(?:.[a-zA-Z]+(?:d*[a-zA-Z_]*)*)+$',
+    email: '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$',
+    passwordRegex: '^(?!.*\\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}\\[\\]|\\\\:;"\'<>,.?/_₹]).{8,}$',
+    // phoneNumber: "^(\\+84|0)([235789])([0-9]{8,9})\\b",
+    phoneNumber: '^(\\+84|0)([235789])([0-9]{8,9})$',
+    seqNum: '^(100|[0-9]{1,2})$',
+    link_basemap: '(https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?/[a-zA-Z0-9]{2,}|((https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?)|(https://www.|http://www.|https://|http://)?[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,})?',
+    alphaDashBreakLineVN: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\(\\)\n]+$",
+    fax: '^(\\+?\\d{1,4}[\\s-]?)?(\\(?\\d{2,4}\\)?[\\s-]?)?[\\d\\s-]{5,15}$',
+    alphaDashNameVN: "^[a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\.s.\/\-\_'\\(\\)]{2,}$",
+    businessCode: '^\\d{10}(-\\d{3})?$',
+};
+// Các error message cho các pattern regex.
+const PATTERN_ERROR_MESSAGES = {
+    required: '%s không được để trống!',
+    number: '%s phải là số!',
+    email: '%s không đúng định dạng địa chỉ Email!',
+    minlength: '%s có kích thước tối thiểu %s ký tự!',
+    maxlength: '%s có kích thước tối đa %s ký tự!',
+    min: '%s phải lớn hơn hoặc bằng %s!',
+    max: '%s phải nhỏ hơn hoặc bằng %s!',
+    alpha: '%s chỉ chứa ký tự thường và ký tự in hoa không dấu!',
+    alphaNumeric: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu và số!',
+    name: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
+    username: '%s chỉ chứa ký tự thường, số, dấu chấm và dấu gạch dưới _',
+    regexPostCode: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu, số, gạch ngang -',
+    alphaDash: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu, số, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
+    alphaVN: '%s chỉ chứa ký tự thường và ký tự in hoa có dấu!',
+    alphaNumericVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu và số!',
+    alphaDashVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
+    alphaDashNameVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu và ít nhất 2 ký tự!',
+    unitName: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, gạch dưới _ hoặc gạch ngang -',
+    date: '%s không đúng định dạng năm tháng ngày (YYYY-MM-DD)!',
+    time: '%s không đúng định dạng giờ phút giây (HH:MM:SS)!',
+    dateTime: '%s không đúng định dạng năm tháng ngày giờ phút giây (YYYY-MM-DD HH:MM:SS)!',
+    dateVN: '%s không đúng định dạng ngày tháng năm (DD/MM/YYYY)!',
+    dateTimeVN: '%s không đúng định dạng ngày tháng năm giờ phút giây (DD/MM/YYYY HH:MI:SS)!',
+    dateShortTimeVN: '%s không đúng định dạng ngày tháng năm giờ phút (DD/MM/YYYY HH:MI)!',
+    integer: '%s phải là số nguyên!',
+    decimal: '%s phải là số thập phân!',
+    ipAddress: '%s không đúng định dạng địa chỉ IP!',
+    base64: '%s không đúng định dạng Base64!',
+    intergerNotZero: '%s phải là số nguyên dương khác 0!',
+    link_location: '%s không đúng định dạng!',
+    link: '%s không đúng định dạng!',
+    codeHsda: "%s chỉ chứa các chữ cái in hoa không dấu, số và dấu '.', '_', '-'",
+    code: "%s chỉ chứa các chữ cái in hoa không dấu, số và dấu '.', '_', '-', '/'",
+    // code: "%s chỉ chứa các chữ cái in hoa,chữ cái thường không dấu, số và dấu '.', '_', '-'",
+    accountName: '%s chỉ bao gồm các kí tự từ A-Z, các số từ 0-9 và ít nhất 2 ký tự',
+    name_or_fullName: '',
+    // pwdErrorTip:
+    //   "%s phải có ít nhất 8 ký tự. Ít nhất 1 ký tự hoa, số, ký tự thường và ký tự đặc biệt",
+    phoneNumber: 'Số điện thoại không hợp lệ (Gợi ý: Số điện thoại phải bắt đầu bằng đầu số 02, 03, 05, 07, 08, 09 hoặc +84 và có độ dài 10-11 ký tự)',
+    seqNum: '(Gợi ý: Thứ tự hiển thị phải là dạng số và có giá trị từ 1-100)',
+    link_basemap: '%s không đúng định dạng!',
+    passwordRegex: '%s phải có ít nhất 8 ký tự. Ít nhất 1 ký tự hoa, ký tự thường, số và ký tự đặc biệt',
+    alphaDashBreakLineVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
+    citizenId: '%s phải đúng định dạng 12 số!',
+    businessCode: '',
+};
+
+const resolvePattern = (pattern) => {
+    if (!pattern)
+        return { type: 'unknown', value: '' };
+    // Trường hợp là RegExp thực sự
+    if (pattern instanceof RegExp)
+        return { type: 'regexObject', value: pattern };
+    // Trường hợp là tên preset (ưu tiên nếu trùng)
+    if (pattern in PATTERN_PRESETS) {
+        return { type: 'regexKey', value: PATTERN_PRESETS[pattern] };
+    }
+    try {
+        // Trường hợp là chuỗi regex dạng "^abc$"
+        return { type: 'regexString', value: new RegExp(pattern) };
+    }
+    catch (err) {
+        console.warn(`Không thể parse pattern "${pattern}"`, err);
+        return { type: 'unknown', value: '' };
+    }
+};
+
+const DEFAULT_INPUT_VALUE = '';
+/**
+ * Interface base chung cho Các dạng Input Field.
+ */
+class InputBaseField extends BaseField {
+    constructor(init) {
+        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.
+    getInputCommonValidators() {
+        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.
+    getInputCustomValidators() {
+        const validators = this.getCustomValidators();
+        validators.push(noLeadingSpaceValidator());
+        return validators;
+    }
+    // Tạo Form Control cho Input Field.
+    toFormControl() {
+        const commonValidators = this.getInputCommonValidators();
+        const customValidators = this.getInputCustomValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+    }
+    // Giá trị mặc định.
+    getDefaultValue() {
+        return DEFAULT_INPUT_VALUE;
+    }
+    toFormValue(modelValue) {
+        return String(modelValue);
+    }
+    getErrorMessage(errorKey, errorValue, allFields) {
+        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);
+    }
+}
+
+/**
+ * Interface của Input Field type là Text.
+ */
+class InputTextField extends InputBaseField {
+    constructor(init) {
+        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.
+    toFormControl() {
+        const commonValidators = this.getInputCommonValidators();
+        const customValidators = this.getInputCustomValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+    }
+}
+
+/**
+ * Interface của Input Field type là Password.
+ */
+class InputPasswordField extends InputBaseField {
+    constructor(init) {
+        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.
+    getInputPasswordCommonValidators() {
+        const validators = this.getInputCommonValidators();
+        return validators;
+    }
+    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
+    getInputPasswordCustomValidators() {
+        const validators = this.getInputCustomValidators();
+        return validators;
+    }
+    // Tạo Form Control cho Input Password Field.
+    toFormControl() {
+        const commonValidators = this.getInputPasswordCommonValidators();
+        const customValidators = this.getInputPasswordCustomValidators();
+        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+    }
+}
+
 /**
  * Interface base chung cho Các dạng Input Field.
  */
@@ -2723,126 +2950,6 @@ const reminderCustomRequiredValidator = () => {
     };
 };
 
-// Các patterns regex thường dùng trong ứng dụng
-const PATTERN_PRESETS = {
-    alpha: '^[a-zA-Z]+$',
-    alphaNumeric: '^[a-zA-Z0-9]+$',
-    name: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\()]+$",
-    username: '^[a-z0-9_.s]+$',
-    regexPostCode: '^[a-zA-Z0-9-s]+$',
-    alphaDash: '^[a-zA-Z0-9_-s.]+$',
-    alphaVN: '^[a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\,s]+$',
-    alphaNumericVN: '^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\s]+$',
-    alphaDashVN: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\()]+$",
-    unitName: '^[a-zA-Z0-9 ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹs_-]+$',
-    date: '([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))',
-    time: '(?=[01]\\d|2[0123])=(?=[012345]\\d)=(?=[012345]\\d)',
-    dateTime: '[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9])=[0-5][0-9]=[0-5][0-9]',
-    // dateV: "^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4}$",
-    // dateV: /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-](19|20)\d\d/,
-    // dateV: "^([0-2][0-9]|(3)[0-1])(\-)(((0)[0-9])|((1)[0-2]))(\-)\d{4}$",
-    dateVN: '^(?=0[1-9]|[12]d|3[01])([/.-])(?=0[1-9]|1[012])\\1(?=19|20)dd$',
-    dateTimeVN: '^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})=(\\d{2})$',
-    dateShortTimeVN: '^(0?[1-9]|[12][0-9]|3[01])[\\/](0?[1-9]|1[012])[\\/]\\d{4} (\\d{2})=(\\d{2})$',
-    integer: '^\\-?[0-9]+$',
-    decimal: '^\\-?[0-9]*\\.?[0-9]+$',
-    ipAddress: '^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$',
-    base64: '[^a-zA-Z0-9\\/\\+=]',
-    citizenId: '^\\d{12}$',
-    passport: '^[A-Z0-9]{6,12}$', //  Hộ chiếu - 6-12 ký tự (chữ IN HOA và số)
-    // dnkhcn: "/^DNKHCN-[A-Z]{2}-d{4}$/",
-    // msdn: "/^d{10}$/",
-    intergerNotZero: '^[0-9]*[1-9][0-9]*$',
-    //link: "(https?=//(?=www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^s]{2,}|https?=//(?=www.|(?!www))[a-zA-Z0-9]+.[^s]{2,}|www.[a-zA-Z0-9]+.[^s]{2,})",
-    // code: "^['A-Z''0-9''._\\-']*$",
-    code: "^['A-Z''0-9''./_\\-\\/\\Đ']*$",
-    codeHsda: "^['A-Z''0-9''./_\\-']*$",
-    link_location: '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})([/\\w .-]*)?(\\?[\\w=&,.%-]*)?',
-    link: '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?',
-    //password: "/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&]).{8,}/",
-    accountName: '^[a-zA-Z0-9_.]{2,20}$',
-    name_or_fullName: '^[a-zA-Z0-9_ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂưăạảấầẩẫậắằẳẵặẹẻẽềềểỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễếệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵỷỹ ]{1,20}$',
-    packageName: '^(?:[a-zA-Z]+(?:d*[a-zA-Z_]*)*)(?:.[a-zA-Z]+(?:d*[a-zA-Z_]*)*)+$',
-    email: '^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$',
-    passwordRegex: '^(?!.*\\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[~`!@#$%^&*()--+={}\\[\\]|\\\\:;"\'<>,.?/_₹]).{8,}$',
-    // phoneNumber: "^(\\+84|0)([235789])([0-9]{8,9})\\b",
-    phoneNumber: '^(\\+84|0)([235789])([0-9]{8,9})$',
-    seqNum: '^(100|[0-9]{1,2})$',
-    link_basemap: '(https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?/[a-zA-Z0-9]{2,}|((https://www.|http://www.|https://|http://)?[a-zA-Z]{2,}(.[a-zA-Z]{2,})(.[a-zA-Z]{2,})?)|(https://www.|http://www.|https://|http://)?[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}.[a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,})?',
-    alphaDashBreakLineVN: "^[0-9a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\\.+,:%&=;s.\\/\\-_'\\(\\)\n]+$",
-    fax: '^(\\+?\\d{1,4}[\\s-]?)?(\\(?\\d{2,4}\\)?[\\s-]?)?[\\d\\s-]{5,15}$',
-    alphaDashNameVN: "^[a-zA-Z_ ÀÁÂÃÈÉÊÌÍÒÓÔÕÙÚĂĐĨŨƠàáâãèéêìíòóôõùúăđĩũơƯĂẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼỀỀỂẾưăạảấầẩẫậắằẳẵặẹẻẽềềểếỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪễệỉịọỏốồổỗộớờởỡợụủứừỬỮỰỲỴÝỶỸửữựỳỵýỷỹ\.s.\/\-\_'\\(\\)]{2,}$",
-    businessCode: '^\\d{10}(-\\d{3})?$',
-};
-// Các error message cho các pattern regex.
-const PATTERN_ERROR_MESSAGES = {
-    required: '%s không được để trống!',
-    number: '%s phải là số!',
-    email: '%s không đúng định dạng địa chỉ Email!',
-    minlength: '%s có kích thước tối thiểu %s ký tự!',
-    maxlength: '%s có kích thước tối đa %s ký tự!',
-    min: '%s phải lớn hơn hoặc bằng %s!',
-    max: '%s phải nhỏ hơn hoặc bằng %s!',
-    alpha: '%s chỉ chứa ký tự thường và ký tự in hoa không dấu!',
-    alphaNumeric: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu và số!',
-    name: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
-    username: '%s chỉ chứa ký tự thường, số, dấu chấm và dấu gạch dưới _',
-    regexPostCode: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu, số, gạch ngang -',
-    alphaDash: '%s chỉ chứa ký tự thường, ký tự in hoa không dấu, số, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
-    alphaVN: '%s chỉ chứa ký tự thường và ký tự in hoa có dấu!',
-    alphaNumericVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu và số!',
-    alphaDashVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
-    alphaDashNameVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu và ít nhất 2 ký tự!',
-    unitName: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, gạch dưới _ hoặc gạch ngang -',
-    date: '%s không đúng định dạng năm tháng ngày (YYYY-MM-DD)!',
-    time: '%s không đúng định dạng giờ phút giây (HH:MM:SS)!',
-    dateTime: '%s không đúng định dạng năm tháng ngày giờ phút giây (YYYY-MM-DD HH:MM:SS)!',
-    dateVN: '%s không đúng định dạng ngày tháng năm (DD/MM/YYYY)!',
-    dateTimeVN: '%s không đúng định dạng ngày tháng năm giờ phút giây (DD/MM/YYYY HH:MI:SS)!',
-    dateShortTimeVN: '%s không đúng định dạng ngày tháng năm giờ phút (DD/MM/YYYY HH:MI)!',
-    integer: '%s phải là số nguyên!',
-    decimal: '%s phải là số thập phân!',
-    ipAddress: '%s không đúng định dạng địa chỉ IP!',
-    base64: '%s không đúng định dạng Base64!',
-    intergerNotZero: '%s phải là số nguyên dương khác 0!',
-    link_location: '%s không đúng định dạng!',
-    link: '%s không đúng định dạng!',
-    codeHsda: "%s chỉ chứa các chữ cái in hoa không dấu, số và dấu '.', '_', '-'",
-    code: "%s chỉ chứa các chữ cái in hoa không dấu, số và dấu '.', '_', '-', '/'",
-    // code: "%s chỉ chứa các chữ cái in hoa,chữ cái thường không dấu, số và dấu '.', '_', '-'",
-    accountName: '%s chỉ bao gồm các kí tự từ A-Z, các số từ 0-9 và ít nhất 2 ký tự',
-    name_or_fullName: '',
-    // pwdErrorTip:
-    //   "%s phải có ít nhất 8 ký tự. Ít nhất 1 ký tự hoa, số, ký tự thường và ký tự đặc biệt",
-    phoneNumber: 'Số điện thoại không hợp lệ (Gợi ý: Số điện thoại phải bắt đầu bằng đầu số 02, 03, 05, 07, 08, 09 hoặc +84 và có độ dài 10-11 ký tự)',
-    seqNum: '(Gợi ý: Thứ tự hiển thị phải là dạng số và có giá trị từ 1-100)',
-    link_basemap: '%s không đúng định dạng!',
-    passwordRegex: '%s phải có ít nhất 8 ký tự. Ít nhất 1 ký tự hoa, ký tự thường, số và ký tự đặc biệt',
-    alphaDashBreakLineVN: '%s chỉ chứa ký tự thường, ký tự in hoa có dấu, số, dấu chấm, dấu phẩy, gạch dưới _ hoặc gạch ngang -, dấu ngoặc ()!',
-    citizenId: '%s phải đúng định dạng 12 số!',
-    businessCode: '',
-};
-
-const resolvePattern = (pattern) => {
-    if (!pattern)
-        return { type: 'unknown', value: '' };
-    // Trường hợp là RegExp thực sự
-    if (pattern instanceof RegExp)
-        return { type: 'regexObject', value: pattern };
-    // Trường hợp là tên preset (ưu tiên nếu trùng)
-    if (pattern in PATTERN_PRESETS) {
-        return { type: 'regexKey', value: PATTERN_PRESETS[pattern] };
-    }
-    try {
-        // Trường hợp là chuỗi regex dạng "^abc$"
-        return { type: 'regexString', value: new RegExp(pattern) };
-    }
-    catch (err) {
-        console.warn(`Không thể parse pattern "${pattern}"`, err);
-        return { type: 'unknown', value: '' };
-    }
-};
-
 const getDefaultPatternErrorMessage = (label, pattern) => {
     let finalErrorMessage = '';
     const resolvePatternResult = resolvePattern(pattern);
@@ -2874,6 +2981,14 @@ const getLeadingSpaceErrorMessage = (label) => {
     return `${label || 'Trường này'} không được bắt đầu bằng khoảng trắng`;
 };
 
+var FormModeEnum;
+(function (FormModeEnum) {
+    FormModeEnum["Add"] = "add";
+    FormModeEnum["Edit"] = "edit";
+    FormModeEnum["View"] = "view";
+    FormModeEnum["Design"] = "design";
+})(FormModeEnum || (FormModeEnum = {}));
+
 /**
  * Abstract class chung cho Field.
  */
@@ -2928,119 +3043,23 @@ class BaseField {
     }
 }
 
-const DEFAULT_INPUT_VALUE = '';
-/**
- * Interface base chung cho Các dạng Input Field.
- */
-class InputBaseField extends BaseField {
-    constructor(init) {
-        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.
-    getInputCommonValidators() {
-        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.
-    getInputCustomValidators() {
-        const validators = this.getCustomValidators();
-        validators.push(noLeadingSpaceValidator());
-        return validators;
-    }
-    // Tạo Form Control cho Input Field.
-    toFormControl() {
-        const commonValidators = this.getInputCommonValidators();
-        const customValidators = this.getInputCustomValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
-    // Giá trị mặc định.
-    getDefaultValue() {
-        return DEFAULT_INPUT_VALUE;
-    }
-    toFormValue(modelValue) {
-        return String(modelValue);
-    }
-    getErrorMessage(errorKey, errorValue, allFields) {
-        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);
-    }
-}
-
-/**
- * Interface của Input Field type là Text.
- */
-class InputTextField extends InputBaseField {
+// Dữ liệu sau khi đã tiến hành xử lý gom nhóm từ fields và groups.
+class GroupedFields {
     constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Input Text.
-         */
-        this.type = FieldTypeEnum.InputText;
+        this.noGroup = [];
+        this.grouped = [];
         Object.assign(this, init);
     }
-    // Tạo Form Control cho Input Text Field.
-    toFormControl() {
-        const commonValidators = this.getInputCommonValidators();
-        const customValidators = this.getInputCustomValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
 }
-
-/**
- * Interface của Input Field type là Password.
- */
-class InputPasswordField extends InputBaseField {
+// Đại diện cho 1 group.
+class FieldGroup {
     constructor(init) {
-        super(init);
-        /**
-         * Gán giá trị cho các props cần giá trị mặc định ở Input Password.
-         */
-        this.type = FieldTypeEnum.InputPassword;
+        this.isActive = false;
+        this.showArrow = true;
+        this.disabled = false;
+        this.required = 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 Password.
-    getInputPasswordCommonValidators() {
-        const validators = this.getInputCommonValidators();
-        return validators;
-    }
-    // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
-    getInputPasswordCustomValidators() {
-        const validators = this.getInputCustomValidators();
-        return validators;
-    }
-    // Tạo Form Control cho Input Password Field.
-    toFormControl() {
-        const commonValidators = this.getInputPasswordCommonValidators();
-        const customValidators = this.getInputPasswordCustomValidators();
-        return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
-    }
 }
 
 const buildForm = (fields, mode, model) => {
@@ -3100,25 +3119,6 @@ const createSelectPlaceholder = (field) => {
     return `Nhập ${field.key?.toLowerCase()}`;
 };
 
-// Dữ liệu sau khi đã tiến hành xử lý gom nhóm từ fields và groups.
-class GroupedFields {
-    constructor(init) {
-        this.noGroup = [];
-        this.grouped = [];
-        Object.assign(this, init);
-    }
-}
-// Đại diện cho 1 group.
-class FieldGroup {
-    constructor(init) {
-        this.isActive = false;
-        this.showArrow = true;
-        this.disabled = false;
-        this.required = false;
-        Object.assign(this, init);
-    }
-}
-
 const isInputTextField = (field) => {
     return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputText;
 };
@@ -6443,7 +6443,7 @@ class ReminderOption {
  * Public API Surface of dynamic-form
  */
 // ==========================================
-// 1. MODULE & COMPONENT & SERVICE CHÍNH
+// 0. BASE FIELD MODELS (CẦN ĐƯỢC EXPORT TRƯỚC ĐỂ TRÁNH LỖI CIRCULAR DEPENDENCY CLASS EXTENDS UNDEFINED)
 // ==========================================
 
 /**