@ldquocc/dynamic-form 0.0.11 → 0.0.12
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.
- package/fesm2022/ldquocc-dynamic-form.mjs +21 -15
- package/fesm2022/ldquocc-dynamic-form.mjs.map +1 -1
- package/lib/shared/base/base-value-accessor.d.ts +1 -0
- package/lib/shared/components/component.d.ts +1 -1
- package/lib/shared/components/fields/select/single-select/single-select.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -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() {
|
|
@@ -3124,17 +3129,16 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3124
3129
|
}
|
|
3125
3130
|
return base;
|
|
3126
3131
|
});
|
|
3132
|
+
this.log = computed(() => {
|
|
3133
|
+
console.log("valueSignalvalueSignalvalueSignalvalueSignal", this.fieldKey(), this.valueSignal());
|
|
3134
|
+
return this.valueSignal();
|
|
3135
|
+
});
|
|
3127
3136
|
// Giá trị dùng hiển thị ở chế độ View.
|
|
3128
3137
|
this.viewDisplayValue = computed(() => {
|
|
3129
3138
|
if (!this.isView())
|
|
3130
3139
|
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());
|
|
3140
|
+
const value = this.rootDataSignal();
|
|
3141
|
+
return this.getDisplayValue(value);
|
|
3138
3142
|
});
|
|
3139
3143
|
this.displayValue = "";
|
|
3140
3144
|
}
|
|
@@ -3151,10 +3155,12 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3151
3155
|
}
|
|
3152
3156
|
// Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
|
|
3153
3157
|
writeValueToView(value) {
|
|
3154
|
-
if (this.isView()) {
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
+
// if (this.isView()) {
|
|
3159
|
+
// this.displayValue = this.getDisplayValue(
|
|
3160
|
+
// this.field().modelValue as string | Record<string, unknown>,
|
|
3161
|
+
// );
|
|
3162
|
+
// return;
|
|
3163
|
+
// }
|
|
3158
3164
|
if (!this.isAddOrEdit())
|
|
3159
3165
|
return;
|
|
3160
3166
|
// Bắn giá trị mới vào BehaviorSubject của FieldService.
|
|
@@ -3259,7 +3265,7 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3259
3265
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3260
3266
|
multi: true,
|
|
3261
3267
|
},
|
|
3262
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n
|
|
3268
|
+
], 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
3269
|
}
|
|
3264
3270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
3265
3271
|
type: Component,
|
|
@@ -3269,7 +3275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3269
3275
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3270
3276
|
multi: true,
|
|
3271
3277
|
},
|
|
3272
|
-
], template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n
|
|
3278
|
+
], 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
3279
|
}], ctorParameters: () => [], propDecorators: { isCustomInputText: [{
|
|
3274
3280
|
type: Input
|
|
3275
3281
|
}] } });
|