@ldquocc/dynamic-form 0.0.11 → 0.0.13
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.
|
@@ -2264,6 +2264,8 @@ class BaseValueAccessor {
|
|
|
2264
2264
|
this.onTouched = () => { };
|
|
2265
2265
|
this.isDisabled = false;
|
|
2266
2266
|
this.disabledSignal = signal(false); // Đang có select dùng isDisableSignal nên sau này đồng bộ lại.
|
|
2267
|
+
// Khai báo signal lưu dữ liệu gốc (root data / model value)
|
|
2268
|
+
this.rootDataSignal = signal(null);
|
|
2267
2269
|
this.dFormService = inject(DynamicFormService);
|
|
2268
2270
|
this.formDataService = inject(FormDataService);
|
|
2269
2271
|
this.fieldService = inject(FieldService);
|
|
@@ -2298,6 +2300,9 @@ class BaseValueAccessor {
|
|
|
2298
2300
|
writeValue(value) {
|
|
2299
2301
|
this.value = value;
|
|
2300
2302
|
this.valueSignal.set(value);
|
|
2303
|
+
// Chụp lại dữ liệu gốc từ modelValue (nếu có) hoặc fallback về value:
|
|
2304
|
+
const rootData = this.fieldInput()?.modelValue ?? value;
|
|
2305
|
+
this.rootDataSignal.set(rootData);
|
|
2301
2306
|
this.writeValueToView(value); // 👈 component con override nếu cần.
|
|
2302
2307
|
}
|
|
2303
2308
|
registerOnChange(fn) {
|
|
@@ -2976,8 +2981,8 @@ class MultiSelectComponent extends BaseSelectComponent {
|
|
|
2976
2981
|
this.viewDisplayValue = computed(() => {
|
|
2977
2982
|
if (!this.isView())
|
|
2978
2983
|
return [];
|
|
2979
|
-
|
|
2980
|
-
return this.getDisplayValue(
|
|
2984
|
+
const value = this.rootDataSignal();
|
|
2985
|
+
return this.getDisplayValue(value);
|
|
2981
2986
|
});
|
|
2982
2987
|
}
|
|
2983
2988
|
onApiOptionsLoaded() {
|
|
@@ -3007,7 +3012,6 @@ class MultiSelectComponent extends BaseSelectComponent {
|
|
|
3007
3012
|
handleValueChange(value) {
|
|
3008
3013
|
const { isParent } = this.field();
|
|
3009
3014
|
if (isParent) {
|
|
3010
|
-
console.log("cscs");
|
|
3011
3015
|
this.fieldService.emitDependValueChange(this.fieldKey(), value.length ? value.join(",") : "");
|
|
3012
3016
|
}
|
|
3013
3017
|
const newOutputValue = value && this.getValueByOutputAs(value);
|
|
@@ -3128,13 +3132,8 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3128
3132
|
this.viewDisplayValue = computed(() => {
|
|
3129
3133
|
if (!this.isView())
|
|
3130
3134
|
return "";
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
console.log("modelValue", this.field().modelValue);
|
|
3134
|
-
console.log("value", this.valueSignal());
|
|
3135
|
-
console.log("getDisplayValue", this.getDisplayValue(this.field().modelValue || this.valueSignal()));
|
|
3136
|
-
}
|
|
3137
|
-
return this.getDisplayValue(this.field().modelValue || this.valueSignal());
|
|
3135
|
+
const value = this.rootDataSignal();
|
|
3136
|
+
return this.getDisplayValue(value);
|
|
3138
3137
|
});
|
|
3139
3138
|
this.displayValue = "";
|
|
3140
3139
|
}
|
|
@@ -3151,10 +3150,12 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3151
3150
|
}
|
|
3152
3151
|
// Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
|
|
3153
3152
|
writeValueToView(value) {
|
|
3154
|
-
if (this.isView()) {
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3153
|
+
// if (this.isView()) {
|
|
3154
|
+
// this.displayValue = this.getDisplayValue(
|
|
3155
|
+
// this.field().modelValue as string | Record<string, unknown>,
|
|
3156
|
+
// );
|
|
3157
|
+
// return;
|
|
3158
|
+
// }
|
|
3158
3159
|
if (!this.isAddOrEdit())
|
|
3159
3160
|
return;
|
|
3160
3161
|
// Bắn giá trị mới vào BehaviorSubject của FieldService.
|
|
@@ -3209,7 +3210,6 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3209
3210
|
}
|
|
3210
3211
|
// Làm phẳng giá trị để hiện thị ở chế độ View.
|
|
3211
3212
|
getDisplayValue(value) {
|
|
3212
|
-
console.log("getdisplay", value);
|
|
3213
3213
|
if (!value)
|
|
3214
3214
|
return NO_INFO_TEXT;
|
|
3215
3215
|
if (typeof value === "object") {
|
|
@@ -3259,7 +3259,7 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3259
3259
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3260
3260
|
multi: true,
|
|
3261
3261
|
},
|
|
3262
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n
|
|
3262
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n <input\r\n [title]=\"viewDisplayValue()\"\r\n nz-input\r\n [value]=\"viewDisplayValue()\"\r\n class=\"modeView\"\r\n />\r\n }\r\n @if (viewMode() === viewModeEnum.text) {\r\n <span [title]=\"viewDisplayValue()\" class=\"modeView break-work\">{{\r\n viewDisplayValue()\r\n }}</span>\r\n }\r\n } @else {\r\n <nz-select\r\n [id]=\"fieldKey()\"\r\n nzShowSearch\r\n nzAllowClear\r\n [nzDisabled]=\"disabled()\"\r\n [nzPlaceHolder]=\"displayPlaceholder()\"\r\n [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n [title]=\"field().tooltip || ''\"\r\n [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n [ngModel]=\"value\"\r\n class=\"flex-1 min-w-0\"\r\n (ngModelChange)=\"handleChangeOptions($event)\"\r\n >\r\n @for (\r\n option of options();\r\n track `${option[this.field().bindValue]}-${$index}`\r\n ) {\r\n <nz-option\r\n [nzValue]=\"transformOptionValue(option)\"\r\n [nzLabel]=\"getOptionLabel(option)\"\r\n >\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #loadingIcon>\r\n <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n </ng-template>\r\n }\r\n\r\n <!-- Suffixes -->\r\n @if (field().suffixes.length > 0) {\r\n @for (suffix of field().suffixes; track $index) {\r\n @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n }\r\n }\r\n }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3$1.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzSpinModule }, { kind: "component", type: i3$2.NzSpinComponent, selector: "nz-spin", inputs: ["nzIndicator", "nzSize", "nzTip", "nzDelay", "nzSimple", "nzSpinning"], exportAs: ["nzSpin"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i1$1.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: SuffixComponent, selector: "app-suffix", inputs: ["suffixConfig", "formId"] }] }); }
|
|
3263
3263
|
}
|
|
3264
3264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
3265
3265
|
type: Component,
|
|
@@ -3269,7 +3269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3269
3269
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3270
3270
|
multi: true,
|
|
3271
3271
|
},
|
|
3272
|
-
], template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n
|
|
3272
|
+
], template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n <input\r\n [title]=\"viewDisplayValue()\"\r\n nz-input\r\n [value]=\"viewDisplayValue()\"\r\n class=\"modeView\"\r\n />\r\n }\r\n @if (viewMode() === viewModeEnum.text) {\r\n <span [title]=\"viewDisplayValue()\" class=\"modeView break-work\">{{\r\n viewDisplayValue()\r\n }}</span>\r\n }\r\n } @else {\r\n <nz-select\r\n [id]=\"fieldKey()\"\r\n nzShowSearch\r\n nzAllowClear\r\n [nzDisabled]=\"disabled()\"\r\n [nzPlaceHolder]=\"displayPlaceholder()\"\r\n [nzSuffixIcon]=\"optionsResource.isLoading() ? loadingIcon : null\"\r\n [title]=\"field().tooltip || ''\"\r\n [nzDropdownMatchSelectWidth]=\"field().matchSelectWidth\"\r\n [ngModel]=\"value\"\r\n class=\"flex-1 min-w-0\"\r\n (ngModelChange)=\"handleChangeOptions($event)\"\r\n >\r\n @for (\r\n option of options();\r\n track `${option[this.field().bindValue]}-${$index}`\r\n ) {\r\n <nz-option\r\n [nzValue]=\"transformOptionValue(option)\"\r\n [nzLabel]=\"getOptionLabel(option)\"\r\n >\r\n </nz-option>\r\n }\r\n </nz-select>\r\n\r\n <ng-template #loadingIcon>\r\n <nz-spin nzSimple [nzSize]=\"'small'\"></nz-spin>\r\n </ng-template>\r\n }\r\n\r\n <!-- Suffixes -->\r\n @if (field().suffixes.length > 0) {\r\n @for (suffix of field().suffixes; track $index) {\r\n @if (suffix.visibleOn?.includes(this.modeSignal())) {\r\n <app-suffix [suffixConfig]=\"suffix\" [formId]=\"formId\"> </app-suffix>\r\n }\r\n }\r\n }\r\n</div>\r\n" }]
|
|
3273
3273
|
}], ctorParameters: () => [], propDecorators: { isCustomInputText: [{
|
|
3274
3274
|
type: Input
|
|
3275
3275
|
}] } });
|
|
@@ -4846,11 +4846,11 @@ class DynamicFormComponent {
|
|
|
4846
4846
|
return field.key || `field-${index}`;
|
|
4847
4847
|
}
|
|
4848
4848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4849
|
-
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?.
|
|
4849
|
+
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?.key || $index) {\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 (\r\n field of groupedFields().noGroup;\r\n track field?.key || $index\r\n ) {\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 (\r\n field of groupField.fields;\r\n track field?.key || $index\r\n ) {\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$4.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$4.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$3.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzDisabled", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i4$3.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"] }] }); }
|
|
4850
4850
|
}
|
|
4851
4851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
4852
4852
|
type: Component,
|
|
4853
|
-
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?.
|
|
4853
|
+
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?.key || $index) {\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 (\r\n field of groupedFields().noGroup;\r\n track field?.key || $index\r\n ) {\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 (\r\n field of groupField.fields;\r\n track field?.key || $index\r\n ) {\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"] }]
|
|
4854
4854
|
}], ctorParameters: () => [{ type: DynamicFormService }], propDecorators: { formId: [{
|
|
4855
4855
|
type: Input
|
|
4856
4856
|
}], valueChangesDebounceTime: [{
|