@ldquocc/dynamic-form 0.0.2 → 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.
  */
@@ -2641,206 +2868,86 @@ const asyncUsernameValidator = (takenUsernames) => {
     };
 };
 // Không có ký tự đặc biệt.
-const noSpecialCharValidator = () => {
-    return (control) => {
-        const valid = /^[a-zA-Z0-9]*$/.test(control.value);
-        return valid ? null : { noSpecialChar: true };
-    };
-};
-// Username không được nằm trong blacklist.
-const usernameBlacklistValidator = (blacklist) => {
-    return (control) => {
-        return blacklist.includes(control.value) ? { blacklisted: true } : null;
-    };
-};
-// Có thuộc mimetypes từ mảng mimetypes được chỉ định hay không?
-const acceptedMimeTypesValidator = (acceptedMimeTypes) => {
-    return (control) => {
-        const value = control?.value;
-        if (value) {
-            let fileType = '';
-            if (value instanceof File) {
-                fileType = value.type;
-            }
-            if (isValidJSON(value)) {
-                const { contentType } = JSON.parse(value)[0] || {};
-                if (contentType)
-                    fileType = contentType;
-            }
-            if (fileType) {
-                if (!acceptedMimeTypes.includes(fileType)) {
-                    return {
-                        acceptedMimeTypes: {
-                            actualValue: fileType,
-                            requiredValue: `Nằm trong ${acceptedMimeTypes}`,
-                        },
-                    };
-                }
-            }
-        }
-        return null;
-    };
-};
-const maxFileSizeInMBValidator = (maxSizeInMB) => {
-    return (control) => {
-        const file = control?.value;
-        if (file) {
-            const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
-            if (fileSizeInMB > maxSizeInMB) {
-                return {
-                    maxSizeInMB: {
-                        actualValue: fileSizeInMB,
-                        requiredValue: `Nhỏ hơn ${maxSizeInMB}`,
-                    },
-                };
-            }
-        }
-        return null;
-    };
-};
-const reminderCustomRequiredValidator = () => {
-    return (control) => {
-        const reminderValue = control?.value;
-        if (!reminderValue) {
-            return {
-                reminderCustomRequired: {
-                    requiredValue: `Giá trị radio và cả từ select hoặc date`,
-                },
-            };
-        }
-        if (reminderValue) {
-            const { reminderDate } = reminderValue;
-            if (!reminderDate) {
-                return {
-                    reminderCustomRequired: {
-                        actualValue: reminderDate,
-                        requiredValue: `Giá trị từ select hoặc date`,
-                    },
-                };
-            }
-        }
-        return null;
-    };
-};
-
-// 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 noSpecialCharValidator = () => {
+    return (control) => {
+        const valid = /^[a-zA-Z0-9]*$/.test(control.value);
+        return valid ? null : { noSpecialChar: true };
+    };
 };
-
-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: '' };
-    }
+// Username không được nằm trong blacklist.
+const usernameBlacklistValidator = (blacklist) => {
+    return (control) => {
+        return blacklist.includes(control.value) ? { blacklisted: true } : null;
+    };
+};
+// Có thuộc mimetypes từ mảng mimetypes được chỉ định hay không?
+const acceptedMimeTypesValidator = (acceptedMimeTypes) => {
+    return (control) => {
+        const value = control?.value;
+        if (value) {
+            let fileType = '';
+            if (value instanceof File) {
+                fileType = value.type;
+            }
+            if (isValidJSON(value)) {
+                const { contentType } = JSON.parse(value)[0] || {};
+                if (contentType)
+                    fileType = contentType;
+            }
+            if (fileType) {
+                if (!acceptedMimeTypes.includes(fileType)) {
+                    return {
+                        acceptedMimeTypes: {
+                            actualValue: fileType,
+                            requiredValue: `Nằm trong ${acceptedMimeTypes}`,
+                        },
+                    };
+                }
+            }
+        }
+        return null;
+    };
+};
+const maxFileSizeInMBValidator = (maxSizeInMB) => {
+    return (control) => {
+        const file = control?.value;
+        if (file) {
+            const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
+            if (fileSizeInMB > maxSizeInMB) {
+                return {
+                    maxSizeInMB: {
+                        actualValue: fileSizeInMB,
+                        requiredValue: `Nhỏ hơn ${maxSizeInMB}`,
+                    },
+                };
+            }
+        }
+        return null;
+    };
+};
+const reminderCustomRequiredValidator = () => {
+    return (control) => {
+        const reminderValue = control?.value;
+        if (!reminderValue) {
+            return {
+                reminderCustomRequired: {
+                    requiredValue: `Giá trị radio và cả từ select hoặc date`,
+                },
+            };
+        }
+        if (reminderValue) {
+            const { reminderDate } = reminderValue;
+            if (!reminderDate) {
+                return {
+                    reminderCustomRequired: {
+                        actualValue: reminderDate,
+                        requiredValue: `Giá trị từ select hoặc date`,
+                    },
+                };
+            }
+        }
+        return null;
+    };
 };
 
 const getDefaultPatternErrorMessage = (label, 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;
 };
@@ -3300,7 +3300,7 @@ class TreeSelectField extends SelectBaseField {
     }
 }
 
-let DynamicFormService$1 = class DynamicFormService {
+class DynamicFormService {
     constructor() {
         this.formConfigService = inject(FormConfigService);
         /**
@@ -3458,8 +3458,8 @@ let DynamicFormService$1 = class DynamicFormService {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
-};
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService$1, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3667,7 +3667,7 @@ class BaseValueAccessor {
         this.onChange = () => { };
         this.onTouched = () => { };
         this.isDisabled = false;
-        this.dFormService = inject(DynamicFormService$1);
+        this.dFormService = inject(DynamicFormService);
         this.formDataService = inject(FormDataService);
         this.fieldService = inject(FieldService);
     }
@@ -6384,13 +6384,13 @@ class DynamicFormComponent {
     trackByField(index, field) {
         return field.key || `field-${index}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService$1 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-forms", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: false, isRequired: false, transformFunction: null }, valueChangesDebounceTime: { classPropertyName: "valueChangesDebounceTime", publicName: "valueChangesDebounceTime", isSignal: false, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, fieldGroups: { classPropertyName: "fieldGroups", publicName: "fieldGroups", isSignal: true, isRequired: false, transformFunction: null }, displayNonGroupedFields: { classPropertyName: "displayNonGroupedFields", publicName: "displayNonGroupedFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formValueChanges: "formValueChanges", formSubmit: "formSubmit", formInvalid: "formInvalid" }, ngImport: i0, template: "@if (formGroup) {\r\n  <form [formGroup]=\"formGroup\">\r\n    @if (oldFields().length > 0) {\r\n      <!-- 1. N\u1EBFu kh\u00F4ng c\u00F3 groups th\u00EC render t\u1EEB fields -->\r\n      @if (!fieldGroups() || fieldGroups().length === 0) {\r\n        <div nz-row [nzGutter]=\"[12, 0]\">\r\n          @for (field of oldFields(); track field?.id) {\r\n            @if (!isHiddenField(field)) {\r\n              <div\r\n                nz-col\r\n                [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                [nzXl]=\"field?.grid?.xl ?? null\"\r\n                [nzLg]=\"field?.grid?.lg ?? null\"\r\n                [nzMd]=\"field?.grid?.md ?? null\"\r\n                [nzSm]=\"field?.grid?.sm ?? null\"\r\n                [nzXs]=\"field?.grid?.xs ?? null\"\r\n                [nzFlex]=\"\r\n                  !field?.grid?.xs &&\r\n                  !field?.grid?.sm &&\r\n                  !field?.grid?.md &&\r\n                  !field?.grid?.lg &&\r\n                  !field?.grid?.xl &&\r\n                  !field?.grid?.xxl\r\n                    ? '1 0 0'\r\n                    : null\r\n                \"\r\n                class=\"field\"\r\n              >\r\n                <app-dynamic-field\r\n                  [field]=\"field\"\r\n                  [fields]=\"oldFields()\"\r\n                  [mode]=\"mode()\"\r\n                  [control]=\"formGroup.get(field.key)!\"\r\n                  [formGroup]=\"formGroup\"\r\n                  [formId]=\"formId\"\r\n                />\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- 2. N\u1EBFu c\u00F3 groups th\u00EC render t\u1EEB groupedFields -->\r\n      @if (fieldGroups() && fieldGroups().length > 0) {\r\n        <!-- C\u00E1c field noGroup -->\r\n        @if (groupedFields().noGroup.length > 0 && displayNonGroupedFields()) {\r\n          <div nz-row [nzGutter]=\"24\">\r\n            @for (field of groupedFields().noGroup; track field?.id) {\r\n              @if (!isHiddenField(field)) {\r\n                <div\r\n                  nz-col\r\n                  [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                  [nzXl]=\"field?.grid?.xl ?? null\"\r\n                  [nzLg]=\"field?.grid?.lg ?? null\"\r\n                  [nzMd]=\"field?.grid?.md ?? null\"\r\n                  [nzSm]=\"field?.grid?.sm ?? null\"\r\n                  [nzXs]=\"field?.grid?.xs ?? null\"\r\n                  class=\"field\"\r\n                >\r\n                  <app-dynamic-field\r\n                    [field]=\"field\"\r\n                    [fields]=\"oldFields()\"\r\n                    [mode]=\"mode()\"\r\n                    [control]=\"formGroup.get(field.key)!\"\r\n                    [formGroup]=\"formGroup\"\r\n                    [formId]=\"formId\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Group c\u00E1c field -->\r\n        @if (groupedFields().grouped.length > 0) {\r\n          <nz-collapse [nzBordered]=\"false\">\r\n            @for (groupField of groupedFields().grouped; track groupField.group.code) {\r\n              <nz-collapse-panel\r\n                [nzHeader]=\"groupField.group.template ?? groupField.group.label\"\r\n                [nzActive]=\"groupField.group.isActive\"\r\n                [nzShowArrow]=\"groupField.group.showArrow\"\r\n                [nzDisabled]=\"groupField.group.disabled\"\r\n                [style]=\"collapseCustomStyle\"\r\n                class=\"mt-sm\"\r\n              >\r\n                <div nz-row [nzGutter]=\"24\">\r\n                  @for (field of groupField.fields; track field?.id) {\r\n                    @if (!isHiddenField(field)) {\r\n                      <div\r\n                        nz-col\r\n                        [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                        [nzXl]=\"field?.grid?.xl ?? null\"\r\n                        [nzLg]=\"field?.grid?.lg ?? null\"\r\n                        [nzMd]=\"field?.grid?.md ?? null\"\r\n                        [nzSm]=\"field?.grid?.sm ?? null\"\r\n                        [nzXs]=\"field?.grid?.xs ?? null\"\r\n                        class=\"field\"\r\n                      >\r\n                        <app-dynamic-field\r\n                          [field]=\"field\"\r\n                          [fields]=\"oldFields()\"\r\n                          [mode]=\"mode()\"\r\n                          [control]=\"formGroup.get(field.key)!\"\r\n                          [formGroup]=\"formGroup\"\r\n                          [formId]=\"formId\"\r\n                        />\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </nz-collapse-panel>\r\n            }\r\n          </nz-collapse>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n}\r\n", styles: [":host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,:host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow{color:#575757;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: i1.FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: i1.ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzFormModule }, { kind: "directive", type: i2$3.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i2$3.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i4$2.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4$2.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition"], exportAs: ["nzCollapse"] }, { kind: "component", type: DynamicFieldComponent, selector: "app-dynamic-field", inputs: ["field", "fields", "mode", "control", "formGroup", "formId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dynamic-forms', standalone: true, imports: [...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS], template: "@if (formGroup) {\r\n  <form [formGroup]=\"formGroup\">\r\n    @if (oldFields().length > 0) {\r\n      <!-- 1. N\u1EBFu kh\u00F4ng c\u00F3 groups th\u00EC render t\u1EEB fields -->\r\n      @if (!fieldGroups() || fieldGroups().length === 0) {\r\n        <div nz-row [nzGutter]=\"[12, 0]\">\r\n          @for (field of oldFields(); track field?.id) {\r\n            @if (!isHiddenField(field)) {\r\n              <div\r\n                nz-col\r\n                [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                [nzXl]=\"field?.grid?.xl ?? null\"\r\n                [nzLg]=\"field?.grid?.lg ?? null\"\r\n                [nzMd]=\"field?.grid?.md ?? null\"\r\n                [nzSm]=\"field?.grid?.sm ?? null\"\r\n                [nzXs]=\"field?.grid?.xs ?? null\"\r\n                [nzFlex]=\"\r\n                  !field?.grid?.xs &&\r\n                  !field?.grid?.sm &&\r\n                  !field?.grid?.md &&\r\n                  !field?.grid?.lg &&\r\n                  !field?.grid?.xl &&\r\n                  !field?.grid?.xxl\r\n                    ? '1 0 0'\r\n                    : null\r\n                \"\r\n                class=\"field\"\r\n              >\r\n                <app-dynamic-field\r\n                  [field]=\"field\"\r\n                  [fields]=\"oldFields()\"\r\n                  [mode]=\"mode()\"\r\n                  [control]=\"formGroup.get(field.key)!\"\r\n                  [formGroup]=\"formGroup\"\r\n                  [formId]=\"formId\"\r\n                />\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- 2. N\u1EBFu c\u00F3 groups th\u00EC render t\u1EEB groupedFields -->\r\n      @if (fieldGroups() && fieldGroups().length > 0) {\r\n        <!-- C\u00E1c field noGroup -->\r\n        @if (groupedFields().noGroup.length > 0 && displayNonGroupedFields()) {\r\n          <div nz-row [nzGutter]=\"24\">\r\n            @for (field of groupedFields().noGroup; track field?.id) {\r\n              @if (!isHiddenField(field)) {\r\n                <div\r\n                  nz-col\r\n                  [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                  [nzXl]=\"field?.grid?.xl ?? null\"\r\n                  [nzLg]=\"field?.grid?.lg ?? null\"\r\n                  [nzMd]=\"field?.grid?.md ?? null\"\r\n                  [nzSm]=\"field?.grid?.sm ?? null\"\r\n                  [nzXs]=\"field?.grid?.xs ?? null\"\r\n                  class=\"field\"\r\n                >\r\n                  <app-dynamic-field\r\n                    [field]=\"field\"\r\n                    [fields]=\"oldFields()\"\r\n                    [mode]=\"mode()\"\r\n                    [control]=\"formGroup.get(field.key)!\"\r\n                    [formGroup]=\"formGroup\"\r\n                    [formId]=\"formId\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Group c\u00E1c field -->\r\n        @if (groupedFields().grouped.length > 0) {\r\n          <nz-collapse [nzBordered]=\"false\">\r\n            @for (groupField of groupedFields().grouped; track groupField.group.code) {\r\n              <nz-collapse-panel\r\n                [nzHeader]=\"groupField.group.template ?? groupField.group.label\"\r\n                [nzActive]=\"groupField.group.isActive\"\r\n                [nzShowArrow]=\"groupField.group.showArrow\"\r\n                [nzDisabled]=\"groupField.group.disabled\"\r\n                [style]=\"collapseCustomStyle\"\r\n                class=\"mt-sm\"\r\n              >\r\n                <div nz-row [nzGutter]=\"24\">\r\n                  @for (field of groupField.fields; track field?.id) {\r\n                    @if (!isHiddenField(field)) {\r\n                      <div\r\n                        nz-col\r\n                        [nzXXl]=\"field?.grid?.xxl ?? null\"\r\n                        [nzXl]=\"field?.grid?.xl ?? null\"\r\n                        [nzLg]=\"field?.grid?.lg ?? null\"\r\n                        [nzMd]=\"field?.grid?.md ?? null\"\r\n                        [nzSm]=\"field?.grid?.sm ?? null\"\r\n                        [nzXs]=\"field?.grid?.xs ?? null\"\r\n                        class=\"field\"\r\n                      >\r\n                        <app-dynamic-field\r\n                          [field]=\"field\"\r\n                          [fields]=\"oldFields()\"\r\n                          [mode]=\"mode()\"\r\n                          [control]=\"formGroup.get(field.key)!\"\r\n                          [formGroup]=\"formGroup\"\r\n                          [formId]=\"formId\"\r\n                        />\r\n                      </div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </nz-collapse-panel>\r\n            }\r\n          </nz-collapse>\r\n        }\r\n      }\r\n    }\r\n  </form>\r\n}\r\n", styles: [":host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,:host ::ng-deep .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow{color:#575757;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: DynamicFormService$1 }], propDecorators: { formId: [{
+        }], ctorParameters: () => [{ type: DynamicFormService }], propDecorators: { formId: [{
                 type: Input
             }], valueChangesDebounceTime: [{
                 type: Input
@@ -6398,18 +6398,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Output
             }] } });
 
-class DynamicFormService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 var TableCellTypeEnum;
 (function (TableCellTypeEnum) {
     TableCellTypeEnum["ACTION"] = "action";
@@ -6455,12 +6443,12 @@ 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)
 // ==========================================
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseDateField, BaseField, BaseUploadField, CombineDependTypeEnum, CommonValidaterEnum, ControlTypeEnum, CustomValidaterEnum, DYNAMIC_FORM_CONFIG, DateFieldTypeEnum, DateOptions, DatePickerField, DatePickerOutputValueTypeEnum, DateRangeField, DateRangeOutputValueTypeEnum, DependTypeEnum, DynamicFormComponent, DynamicFormService, FieldGroup, FieldTypeEnum, FileSizeTypeEnum, FormConfigService, FormModeEnum, GroupedFields, InputBaseField, InputFieldTypeEnum, InputPasswordField, InputTextField, MultiSelectField, RadioBaseField, ReminderOption, ReminderTypeRadioField, ReminderValue, SelectBaseField, SelectFieldTypeEnum, SelectOption, SelectOutputValueTypeEnum, SingleSelectField, TableCellTypeEnum, TextareaField, TreeSelectField, UploadFieldTypeEnum, UploadOutputValueTypeEnum, ViewModeEnum };
+export { BaseDateField, BaseField, BaseUploadField, CombineDependTypeEnum, CommonValidaterEnum, ControlTypeEnum, CustomValidaterEnum, DYNAMIC_FORM_CONFIG, DateFieldTypeEnum, DateOptions, DatePickerField, DatePickerOutputValueTypeEnum, DateRangeField, DateRangeOutputValueTypeEnum, DependTypeEnum, DynamicFormComponent, DynamicFormService, FieldGroup, FieldTypeEnum, FileSizeTypeEnum, FormConfigService, FormDataService, FormModeEnum, GroupedFields, InputBaseField, InputFieldTypeEnum, InputPasswordField, InputTextField, MultiSelectField, RadioBaseField, ReminderOption, ReminderTypeRadioField, ReminderValue, SelectBaseField, SelectFieldTypeEnum, SelectOption, SelectOutputValueTypeEnum, SingleSelectField, TableCellTypeEnum, TextareaField, TreeSelectField, UploadFieldTypeEnum, UploadOutputValueTypeEnum, ViewModeEnum };
 //# sourceMappingURL=ldquocc-dynamic-form.mjs.map