@ldquocc/dynamic-form 0.0.10 → 0.0.11
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.
|
@@ -966,15 +966,22 @@ const buildForm = (fields, mode, model) => {
|
|
|
966
966
|
continue;
|
|
967
967
|
const fieldKey = field?.key;
|
|
968
968
|
// field.value = field.allowSetValue ? (model?.[fieldKey] || field.value) : null;
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
969
|
+
// 1. Luôn luôn reset về default trước để xoá cache cũ của instance field
|
|
970
|
+
field.value = field.getDefaultValue();
|
|
971
|
+
field.modelValue = null;
|
|
972
|
+
// 2. Kiểm tra quyền set value theo FormMode hiện tại
|
|
973
|
+
const isAllowedSet = Array.isArray(field.allowSetValue)
|
|
974
|
+
? field.allowSetValue.includes(mode)
|
|
975
|
+
: Boolean(field.allowSetValue);
|
|
976
|
+
// 3. Chỉ nạp từ model nếu mode cho phép và model có key đó
|
|
977
|
+
if (isAllowedSet &&
|
|
978
|
+
model &&
|
|
979
|
+
fieldKey in model &&
|
|
980
|
+
model[fieldKey] !== undefined) {
|
|
981
|
+
field.value = field.toFormValue(model[fieldKey]);
|
|
982
|
+
field.modelValue = model[fieldKey];
|
|
977
983
|
}
|
|
984
|
+
field.initialValue = field.value;
|
|
978
985
|
// console.log("e", field.value );
|
|
979
986
|
// field.value = field.allowSetValue ? field.toFormValue(model?.[fieldKey] | field.getDefaultValue()) : field.getDefaultValue();
|
|
980
987
|
const control = field.toFormControl();
|
|
@@ -3121,8 +3128,15 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3121
3128
|
this.viewDisplayValue = computed(() => {
|
|
3122
3129
|
if (!this.isView())
|
|
3123
3130
|
return "";
|
|
3131
|
+
if (this.field()?.key === "role") {
|
|
3132
|
+
console.log(`================= ${this.field()?.key} ================`);
|
|
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
|
+
}
|
|
3124
3137
|
return this.getDisplayValue(this.field().modelValue || this.valueSignal());
|
|
3125
3138
|
});
|
|
3139
|
+
this.displayValue = "";
|
|
3126
3140
|
}
|
|
3127
3141
|
onApiOptionsLoaded() {
|
|
3128
3142
|
const field = this.field();
|
|
@@ -3137,6 +3151,10 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3137
3151
|
}
|
|
3138
3152
|
// Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
|
|
3139
3153
|
writeValueToView(value) {
|
|
3154
|
+
if (this.isView()) {
|
|
3155
|
+
this.displayValue = this.getDisplayValue(this.field().modelValue);
|
|
3156
|
+
return;
|
|
3157
|
+
}
|
|
3140
3158
|
if (!this.isAddOrEdit())
|
|
3141
3159
|
return;
|
|
3142
3160
|
// Bắn giá trị mới vào BehaviorSubject của FieldService.
|
|
@@ -3191,6 +3209,7 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3191
3209
|
}
|
|
3192
3210
|
// Làm phẳng giá trị để hiện thị ở chế độ View.
|
|
3193
3211
|
getDisplayValue(value) {
|
|
3212
|
+
console.log("getdisplay", value);
|
|
3194
3213
|
if (!value)
|
|
3195
3214
|
return NO_INFO_TEXT;
|
|
3196
3215
|
if (typeof value === "object") {
|
|
@@ -3240,7 +3259,7 @@ class SingleSelectComponent extends BaseSelectComponent {
|
|
|
3240
3259
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3241
3260
|
multi: true,
|
|
3242
3261
|
},
|
|
3243
|
-
], 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]=\"
|
|
3262
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n haha {{ viewDisplayValue() }}\r\n <input\r\n [title]=\"displayValue\"\r\n nz-input\r\n [value]=\"displayValue\"\r\n class=\"modeView\"\r\n />\r\n }\r\n @if (viewMode() === viewModeEnum.text) {\r\n <span [title]=\"displayValue\" class=\"modeView break-work\">{{\r\n displayValue\r\n }}</span>\r\n }\r\n } @else {\r\n logggg\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"] }] }); }
|
|
3244
3263
|
}
|
|
3245
3264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
3246
3265
|
type: Component,
|
|
@@ -3250,7 +3269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3250
3269
|
useExisting: forwardRef(() => SingleSelectComponent),
|
|
3251
3270
|
multi: true,
|
|
3252
3271
|
},
|
|
3253
|
-
], template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n <input\r\n [title]=\"
|
|
3272
|
+
], template: "<div class=\"d-flex\">\r\n @if (isView()) {\r\n @if (viewMode() === viewModeEnum.form) {\r\n haha {{ viewDisplayValue() }}\r\n <input\r\n [title]=\"displayValue\"\r\n nz-input\r\n [value]=\"displayValue\"\r\n class=\"modeView\"\r\n />\r\n }\r\n @if (viewMode() === viewModeEnum.text) {\r\n <span [title]=\"displayValue\" class=\"modeView break-work\">{{\r\n displayValue\r\n }}</span>\r\n }\r\n } @else {\r\n logggg\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" }]
|
|
3254
3273
|
}], ctorParameters: () => [], propDecorators: { isCustomInputText: [{
|
|
3255
3274
|
type: Input
|
|
3256
3275
|
}] } });
|