@ldquocc/dynamic-form 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,7 +8,7 @@ import * as i0 from '@angular/core';
|
|
|
8
8
|
import { InjectionToken, inject, Injectable, signal, untracked, input, computed, effect, Input, Directive, forwardRef, Component, viewChild, EventEmitter, output, Output } from '@angular/core';
|
|
9
9
|
import * as i3$3 from 'ng-zorro-antd/form';
|
|
10
10
|
import { NzFormModule } from 'ng-zorro-antd/form';
|
|
11
|
-
import { isEqual } from 'lodash-es';
|
|
11
|
+
import { clone, isEqual } from 'lodash-es';
|
|
12
12
|
import { format, differenceInCalendarDays } from 'date-fns';
|
|
13
13
|
import { HttpClient } from '@angular/common/http';
|
|
14
14
|
import * as i2 from 'ng-zorro-antd/date-picker';
|
|
@@ -4726,7 +4726,8 @@ class DynamicFormComponent {
|
|
|
4726
4726
|
if (isHidden)
|
|
4727
4727
|
return true;
|
|
4728
4728
|
if (field instanceof InputPasswordField) {
|
|
4729
|
-
if (this.mode() === FormModeEnum.Edit ||
|
|
4729
|
+
if (this.mode() === FormModeEnum.Edit ||
|
|
4730
|
+
this.mode() === FormModeEnum.View) {
|
|
4730
4731
|
return true;
|
|
4731
4732
|
}
|
|
4732
4733
|
}
|
|
@@ -4743,44 +4744,14 @@ class DynamicFormComponent {
|
|
|
4743
4744
|
*/
|
|
4744
4745
|
this.createFormGroupEffect = effect(() => {
|
|
4745
4746
|
const { mode, newFields, model } = this.formState();
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
this.dFormService.setFormGroup(this.formGroup);
|
|
4751
|
-
// Subscribe to form value changes
|
|
4752
|
-
// Lắng nghe sự thay đổi giá trị của form
|
|
4753
|
-
this.subscribeToFormValueChanges();
|
|
4754
|
-
// console.log('formGroup create from new fields', this.formGroup);
|
|
4755
|
-
return;
|
|
4756
|
-
}
|
|
4757
|
-
// patch value nếu không phải fields mới.
|
|
4758
|
-
for (const field of oldFields) {
|
|
4759
|
-
// Loại bỏ nếu quyết định ẩn field đi.
|
|
4760
|
-
if (field.isHidden)
|
|
4761
|
-
continue;
|
|
4762
|
-
// Nếu là dạng InputPasswordField nhưng ở mode edit và view thì không được dùng.
|
|
4763
|
-
if (field instanceof InputPasswordField &&
|
|
4764
|
-
(mode === FormModeEnum.Edit || mode === FormModeEnum.View))
|
|
4765
|
-
continue;
|
|
4766
|
-
const fieldKey = field?.key;
|
|
4767
|
-
const control = this.formGroup.get(fieldKey);
|
|
4768
|
-
if (field.allowSetValue) {
|
|
4769
|
-
field.value = field.getDefaultValue();
|
|
4770
|
-
field.modelValue = null;
|
|
4771
|
-
if (model?.[fieldKey]) {
|
|
4772
|
-
field.value = field.toFormValue(model[fieldKey]);
|
|
4773
|
-
field.modelValue = model[fieldKey];
|
|
4774
|
-
}
|
|
4775
|
-
field.initialValue = field.value;
|
|
4776
|
-
}
|
|
4777
|
-
control?.reset(field.value);
|
|
4778
|
-
}
|
|
4779
|
-
// console.log('formGroup create from old fields', this.formGroup);
|
|
4747
|
+
this.oldFields.set(newFields);
|
|
4748
|
+
const computedFields = clone(newFields);
|
|
4749
|
+
this.formGroup = buildForm(computedFields, mode, model);
|
|
4750
|
+
this.dFormService.setFormGroup(this.formGroup);
|
|
4780
4751
|
});
|
|
4781
4752
|
this.collapseCustomStyle = {
|
|
4782
|
-
background:
|
|
4783
|
-
border:
|
|
4753
|
+
background: "#fff",
|
|
4754
|
+
border: "0px",
|
|
4784
4755
|
};
|
|
4785
4756
|
// Trigger form từ submit bên ngoài.
|
|
4786
4757
|
effect(() => {
|
|
@@ -4813,7 +4784,7 @@ class DynamicFormComponent {
|
|
|
4813
4784
|
this.destroy$.next();
|
|
4814
4785
|
this.formGroup.valueChanges
|
|
4815
4786
|
.pipe(debounceTime(this.valueChangesDebounceTime), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), takeUntil(this.destroy$))
|
|
4816
|
-
.subscribe(formValue => {
|
|
4787
|
+
.subscribe((formValue) => {
|
|
4817
4788
|
// console.log('Form value changed:', formValue);
|
|
4818
4789
|
this.formValueChanges.emit(formValue);
|
|
4819
4790
|
});
|
|
@@ -4830,7 +4801,7 @@ class DynamicFormComponent {
|
|
|
4830
4801
|
for (const name in controls) {
|
|
4831
4802
|
if (controls[name].invalid) {
|
|
4832
4803
|
this.markControlForValidation(controls[name]);
|
|
4833
|
-
const field = this.fields().find(field => field.key === name);
|
|
4804
|
+
const field = this.fields().find((field) => field.key === name);
|
|
4834
4805
|
if (field)
|
|
4835
4806
|
invalidFields.push(field);
|
|
4836
4807
|
}
|
|
@@ -4860,7 +4831,7 @@ class DynamicFormComponent {
|
|
|
4860
4831
|
}
|
|
4861
4832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
4862
4833
|
type: Component,
|
|
4863
|
-
args: [{ selector:
|
|
4834
|
+
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 (\r\n groupField of groupedFields().grouped;\r\n track groupField.group.code\r\n ) {\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"] }]
|
|
4864
4835
|
}], ctorParameters: () => [{ type: DynamicFormService }], propDecorators: { formId: [{
|
|
4865
4836
|
type: Input
|
|
4866
4837
|
}], valueChangesDebounceTime: [{
|