@ngil/form-cva 1.3.2 → 2.0.0
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/{esm2020 → esm2022}/index.mjs +7 -7
- package/{esm2020 → esm2022}/lib/error-messages.mjs +14 -14
- package/{esm2020 → esm2022}/lib/models/abstract-form-array-component.mjs +90 -90
- package/{esm2020 → esm2022}/lib/models/abstract-form-component.mjs +53 -53
- package/{esm2020 → esm2022}/lib/models/abstract-form-group.component.mjs +60 -60
- package/{esm2020 → esm2022}/lib/models/abstract-input-component.mjs +99 -99
- package/{esm2020 → esm2022}/lib/models/form.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/ngil-ui-common-form-cva.module.mjs +15 -15
- package/{esm2020 → esm2022}/lib/utils/control-value-accessor.util.mjs +16 -16
- package/{esm2020 → esm2022}/ngil-form-cva.mjs +4 -4
- package/{fesm2020 → fesm2022}/ngil-form-cva.mjs +315 -315
- package/{fesm2020 → fesm2022}/ngil-form-cva.mjs.map +1 -1
- package/index.d.ts +7 -7
- package/lib/error-messages.d.ts +1 -1
- package/lib/models/abstract-form-array-component.d.ts +32 -32
- package/lib/models/abstract-form-component.d.ts +19 -19
- package/lib/models/abstract-form-group.component.d.ts +34 -34
- package/lib/models/abstract-input-component.d.ts +34 -34
- package/lib/models/form.model.d.ts +17 -17
- package/lib/ngil-ui-common-form-cva.module.d.ts +7 -7
- package/lib/utils/control-value-accessor.util.d.ts +6 -6
- package/package.json +8 -122
- package/fesm2015/ngil-form-cva.mjs +0 -341
- package/fesm2015/ngil-form-cva.mjs.map +0 -1
|
@@ -6,335 +6,335 @@ import { Subject, takeUntil, BehaviorSubject, combineLatest } from 'rxjs';
|
|
|
6
6
|
import { takeUntil as takeUntil$1 } from 'rxjs/operators';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
|
|
9
|
-
/**
|
|
10
|
-
*
|
|
11
|
-
*/
|
|
12
|
-
class AbstractFormArrayComponent {
|
|
13
|
-
constructor() {
|
|
14
|
-
this.destroy$ = new Subject();
|
|
15
|
-
this.formGroup = new FormGroup({
|
|
16
|
-
formArray: this.createFormArray()
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
get formArray() {
|
|
20
|
-
return this.formGroup.controls.formArray;
|
|
21
|
-
}
|
|
22
|
-
ngAfterViewInit() {
|
|
23
|
-
this.listenValueChanges();
|
|
24
|
-
}
|
|
25
|
-
listenValueChanges() {
|
|
26
|
-
this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
27
|
-
if (this.onChange) {
|
|
28
|
-
this.onChange(this.formArray.getRawValue());
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
registerOnChange(fn) {
|
|
33
|
-
this.onChange = fn;
|
|
34
|
-
}
|
|
35
|
-
registerOnTouched(fn) {
|
|
36
|
-
this.onTouched = fn;
|
|
37
|
-
}
|
|
38
|
-
writeValue(items) {
|
|
39
|
-
this.prepareControls(items);
|
|
40
|
-
if (items) {
|
|
41
|
-
this.formArray.patchValue(items, { emitEvent: false });
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
this.formArray.reset(undefined, { emitEvent: false });
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
setDisabledState(isDisabled) {
|
|
48
|
-
isDisabled ? this.formGroup.disable({ emitEvent: false }) : this.formGroup.enable({ emitEvent: false });
|
|
49
|
-
}
|
|
50
|
-
validate() {
|
|
51
|
-
if (this.formArray.invalid) {
|
|
52
|
-
return { invalidFormArray: true };
|
|
53
|
-
}
|
|
54
|
-
return null;
|
|
55
|
-
}
|
|
56
|
-
prepareControls(items) {
|
|
57
|
-
items = items || [];
|
|
58
|
-
if (this.formArray.value.length < items.length) {
|
|
59
|
-
this.addExtraControls(items);
|
|
60
|
-
}
|
|
61
|
-
if (this.formArray.value.length > items.length) {
|
|
62
|
-
this.removeExtraControls(items);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
addExtraControls(items) {
|
|
66
|
-
items.forEach((item, index) => {
|
|
67
|
-
const control = this.formArray.at(index);
|
|
68
|
-
if (!control) {
|
|
69
|
-
this.formArray.push(this.createFormArrayItem(item));
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
removeExtraControls(items) {
|
|
74
|
-
let formArrayIndex = 0;
|
|
75
|
-
this.formArray.value.forEach((item, index) => {
|
|
76
|
-
if (!items[index]) {
|
|
77
|
-
this.formArray.removeAt(formArrayIndex);
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
formArrayIndex++;
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
ngOnDestroy() {
|
|
85
|
-
this.destroy$.next();
|
|
86
|
-
this.destroy$.complete();
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
92
|
-
type: Directive
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
*/
|
|
12
|
+
class AbstractFormArrayComponent {
|
|
13
|
+
constructor() {
|
|
14
|
+
this.destroy$ = new Subject();
|
|
15
|
+
this.formGroup = new FormGroup({
|
|
16
|
+
formArray: this.createFormArray()
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
get formArray() {
|
|
20
|
+
return this.formGroup.controls.formArray;
|
|
21
|
+
}
|
|
22
|
+
ngAfterViewInit() {
|
|
23
|
+
this.listenValueChanges();
|
|
24
|
+
}
|
|
25
|
+
listenValueChanges() {
|
|
26
|
+
this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
27
|
+
if (this.onChange) {
|
|
28
|
+
this.onChange(this.formArray.getRawValue());
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
registerOnChange(fn) {
|
|
33
|
+
this.onChange = fn;
|
|
34
|
+
}
|
|
35
|
+
registerOnTouched(fn) {
|
|
36
|
+
this.onTouched = fn;
|
|
37
|
+
}
|
|
38
|
+
writeValue(items) {
|
|
39
|
+
this.prepareControls(items);
|
|
40
|
+
if (items) {
|
|
41
|
+
this.formArray.patchValue(items, { emitEvent: false });
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
this.formArray.reset(undefined, { emitEvent: false });
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
setDisabledState(isDisabled) {
|
|
48
|
+
isDisabled ? this.formGroup.disable({ emitEvent: false }) : this.formGroup.enable({ emitEvent: false });
|
|
49
|
+
}
|
|
50
|
+
validate() {
|
|
51
|
+
if (this.formArray.invalid) {
|
|
52
|
+
return { invalidFormArray: true };
|
|
53
|
+
}
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
prepareControls(items) {
|
|
57
|
+
items = items || [];
|
|
58
|
+
if (this.formArray.value.length < items.length) {
|
|
59
|
+
this.addExtraControls(items);
|
|
60
|
+
}
|
|
61
|
+
if (this.formArray.value.length > items.length) {
|
|
62
|
+
this.removeExtraControls(items);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
addExtraControls(items) {
|
|
66
|
+
items.forEach((item, index) => {
|
|
67
|
+
const control = this.formArray.at(index);
|
|
68
|
+
if (!control) {
|
|
69
|
+
this.formArray.push(this.createFormArrayItem(item));
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
removeExtraControls(items) {
|
|
74
|
+
let formArrayIndex = 0;
|
|
75
|
+
this.formArray.value.forEach((item, index) => {
|
|
76
|
+
if (!items[index]) {
|
|
77
|
+
this.formArray.removeAt(formArrayIndex);
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
formArrayIndex++;
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
ngOnDestroy() {
|
|
85
|
+
this.destroy$.next();
|
|
86
|
+
this.destroy$.complete();
|
|
87
|
+
}
|
|
88
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
89
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormArrayComponent, ngImport: i0 }); }
|
|
90
|
+
}
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormArrayComponent, decorators: [{
|
|
92
|
+
type: Directive
|
|
93
93
|
}] });
|
|
94
94
|
|
|
95
|
-
class AbstractFormComponent {
|
|
96
|
-
constructor() {
|
|
97
|
-
this.submitted = new EventEmitter();
|
|
98
|
-
this.destroy$ = new Subject();
|
|
99
|
-
}
|
|
100
|
-
get isSubmitDisabled() {
|
|
101
|
-
return !this.form.valid || this.form.pristine;
|
|
102
|
-
}
|
|
103
|
-
get isCancelDisabled() {
|
|
104
|
-
return !this.form.dirty;
|
|
105
|
-
}
|
|
106
|
-
getFormDefaultValue(model) {
|
|
107
|
-
return model;
|
|
108
|
-
}
|
|
109
|
-
ngOnInit() {
|
|
110
|
-
this.form.patchValue(this.getFormDefaultValue(this.formViewModel) || {}, { emitEvent: false });
|
|
111
|
-
}
|
|
112
|
-
submit() {
|
|
113
|
-
if (!this.isSubmitDisabled) {
|
|
114
|
-
this.submitted.emit({
|
|
115
|
-
...this.formViewModel,
|
|
116
|
-
...this.form.value
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
else {
|
|
120
|
-
Object.values(this.form.controls).forEach(control => control.updateValueAndValidity());
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
cancel() {
|
|
124
|
-
if (!this.isCancelDisabled) {
|
|
125
|
-
this.form.reset(this.getFormDefaultValue(this.formViewModel), { emitEvent: false });
|
|
126
|
-
this.form.markAsPristine();
|
|
127
|
-
this.form.markAsUntouched();
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
ngOnDestroy() {
|
|
131
|
-
this.destroy$.next();
|
|
132
|
-
this.destroy$.complete();
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
138
|
-
type: Directive
|
|
139
|
-
}], propDecorators: { formViewModel: [{
|
|
140
|
-
type: Input
|
|
141
|
-
}], submitted: [{
|
|
142
|
-
type: Output
|
|
95
|
+
class AbstractFormComponent {
|
|
96
|
+
constructor() {
|
|
97
|
+
this.submitted = new EventEmitter();
|
|
98
|
+
this.destroy$ = new Subject();
|
|
99
|
+
}
|
|
100
|
+
get isSubmitDisabled() {
|
|
101
|
+
return !this.form.valid || this.form.pristine;
|
|
102
|
+
}
|
|
103
|
+
get isCancelDisabled() {
|
|
104
|
+
return !this.form.dirty;
|
|
105
|
+
}
|
|
106
|
+
getFormDefaultValue(model) {
|
|
107
|
+
return model;
|
|
108
|
+
}
|
|
109
|
+
ngOnInit() {
|
|
110
|
+
this.form.patchValue(this.getFormDefaultValue(this.formViewModel) || {}, { emitEvent: false });
|
|
111
|
+
}
|
|
112
|
+
submit() {
|
|
113
|
+
if (!this.isSubmitDisabled) {
|
|
114
|
+
this.submitted.emit({
|
|
115
|
+
...this.formViewModel,
|
|
116
|
+
...this.form.value
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
Object.values(this.form.controls).forEach(control => control.updateValueAndValidity());
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
cancel() {
|
|
124
|
+
if (!this.isCancelDisabled) {
|
|
125
|
+
this.form.reset(this.getFormDefaultValue(this.formViewModel), { emitEvent: false });
|
|
126
|
+
this.form.markAsPristine();
|
|
127
|
+
this.form.markAsUntouched();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
ngOnDestroy() {
|
|
131
|
+
this.destroy$.next();
|
|
132
|
+
this.destroy$.complete();
|
|
133
|
+
}
|
|
134
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
135
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormComponent, inputs: { formViewModel: "formViewModel" }, outputs: { submitted: "submitted" }, ngImport: i0 }); }
|
|
136
|
+
}
|
|
137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormComponent, decorators: [{
|
|
138
|
+
type: Directive
|
|
139
|
+
}], propDecorators: { formViewModel: [{
|
|
140
|
+
type: Input
|
|
141
|
+
}], submitted: [{
|
|
142
|
+
type: Output
|
|
143
143
|
}] } });
|
|
144
144
|
|
|
145
|
-
/**
|
|
146
|
-
* This class implements ControlValueAccessor logic for a FormGroup.
|
|
147
|
-
* NG_VALUE_ACCESSOR and NG_VALIDATORS must be provided in the component.
|
|
148
|
-
*
|
|
149
|
-
* The FormGroup changes will be automatically change the parent FormControl value.
|
|
150
|
-
*
|
|
151
|
-
* Example:
|
|
152
|
-
|
|
153
|
-
*/
|
|
154
|
-
class AbstractFormGroupComponent {
|
|
155
|
-
constructor() {
|
|
156
|
-
this.destroy$ = new Subject();
|
|
157
|
-
}
|
|
158
|
-
ngAfterViewInit() {
|
|
159
|
-
this.listenValueChanges();
|
|
160
|
-
}
|
|
161
|
-
listenValueChanges() {
|
|
162
|
-
this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
163
|
-
if (this.onChange) {
|
|
164
|
-
this.onChange(this.formGroup.getRawValue());
|
|
165
|
-
}
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
registerOnChange(fn) {
|
|
169
|
-
this.onChange = fn;
|
|
170
|
-
}
|
|
171
|
-
registerOnTouched(fn) {
|
|
172
|
-
this.onTouched = fn;
|
|
173
|
-
}
|
|
174
|
-
writeValue(formValue) {
|
|
175
|
-
if (formValue) {
|
|
176
|
-
this.formGroup.patchValue(formValue, { emitEvent: false });
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
this.formGroup.reset(undefined, { emitEvent: false });
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
setDisabledState(isDisabled) {
|
|
183
|
-
isDisabled ? this.formGroup.disable({ emitEvent: false }) : this.formGroup.enable({ emitEvent: false });
|
|
184
|
-
}
|
|
185
|
-
validate() {
|
|
186
|
-
if (this.formGroup.invalid) {
|
|
187
|
-
return { invalidFormGroup: true };
|
|
188
|
-
}
|
|
189
|
-
return null;
|
|
190
|
-
}
|
|
191
|
-
ngOnDestroy() {
|
|
192
|
-
this.destroy$.next();
|
|
193
|
-
this.destroy$.complete();
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
199
|
-
type: Directive
|
|
145
|
+
/**
|
|
146
|
+
* This class implements ControlValueAccessor logic for a FormGroup.
|
|
147
|
+
* NG_VALUE_ACCESSOR and NG_VALIDATORS must be provided in the component.
|
|
148
|
+
*
|
|
149
|
+
* The FormGroup changes will be automatically change the parent FormControl value.
|
|
150
|
+
*
|
|
151
|
+
* Example:
|
|
152
|
+
|
|
153
|
+
*/
|
|
154
|
+
class AbstractFormGroupComponent {
|
|
155
|
+
constructor() {
|
|
156
|
+
this.destroy$ = new Subject();
|
|
157
|
+
}
|
|
158
|
+
ngAfterViewInit() {
|
|
159
|
+
this.listenValueChanges();
|
|
160
|
+
}
|
|
161
|
+
listenValueChanges() {
|
|
162
|
+
this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
|
|
163
|
+
if (this.onChange) {
|
|
164
|
+
this.onChange(this.formGroup.getRawValue());
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
registerOnChange(fn) {
|
|
169
|
+
this.onChange = fn;
|
|
170
|
+
}
|
|
171
|
+
registerOnTouched(fn) {
|
|
172
|
+
this.onTouched = fn;
|
|
173
|
+
}
|
|
174
|
+
writeValue(formValue) {
|
|
175
|
+
if (formValue) {
|
|
176
|
+
this.formGroup.patchValue(formValue, { emitEvent: false });
|
|
177
|
+
}
|
|
178
|
+
else {
|
|
179
|
+
this.formGroup.reset(undefined, { emitEvent: false });
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
setDisabledState(isDisabled) {
|
|
183
|
+
isDisabled ? this.formGroup.disable({ emitEvent: false }) : this.formGroup.enable({ emitEvent: false });
|
|
184
|
+
}
|
|
185
|
+
validate() {
|
|
186
|
+
if (this.formGroup.invalid) {
|
|
187
|
+
return { invalidFormGroup: true };
|
|
188
|
+
}
|
|
189
|
+
return null;
|
|
190
|
+
}
|
|
191
|
+
ngOnDestroy() {
|
|
192
|
+
this.destroy$.next();
|
|
193
|
+
this.destroy$.complete();
|
|
194
|
+
}
|
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormGroupComponent, ngImport: i0 }); }
|
|
197
|
+
}
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormGroupComponent, decorators: [{
|
|
199
|
+
type: Directive
|
|
200
200
|
}] });
|
|
201
201
|
|
|
202
|
-
const errorMessages = {
|
|
203
|
-
required: '{{fieldName}} is required.',
|
|
204
|
-
max: 'Maximum {{fieldName}} is {{max}}.',
|
|
205
|
-
min: 'Minimum {{fieldName}} is {{min}}.',
|
|
206
|
-
maxlength: '{{fieldName}} can be max {{requiredLength}} characters long.',
|
|
207
|
-
minlength: '{{fieldName}} must be at least {{requiredLength}} characters long.',
|
|
208
|
-
email: '{{fieldName}} must be an email.'
|
|
209
|
-
};
|
|
210
|
-
function getErrorMessage(errorKey, replacements) {
|
|
211
|
-
if (!errorMessages[errorKey]) {
|
|
212
|
-
return `Missing error message to the error with key ${errorKey}`;
|
|
213
|
-
}
|
|
214
|
-
return errorMessages[errorKey].replace(/{{(\w+)}}/g, (placeholderWithDelimiters, placeholderWithoutDelimiters) => replacements[placeholderWithoutDelimiters] ? replacements[placeholderWithoutDelimiters] : placeholderWithDelimiters);
|
|
202
|
+
const errorMessages = {
|
|
203
|
+
required: '{{fieldName}} is required.',
|
|
204
|
+
max: 'Maximum {{fieldName}} is {{max}}.',
|
|
205
|
+
min: 'Minimum {{fieldName}} is {{min}}.',
|
|
206
|
+
maxlength: '{{fieldName}} can be max {{requiredLength}} characters long.',
|
|
207
|
+
minlength: '{{fieldName}} must be at least {{requiredLength}} characters long.',
|
|
208
|
+
email: '{{fieldName}} must be an email.'
|
|
209
|
+
};
|
|
210
|
+
function getErrorMessage(errorKey, replacements) {
|
|
211
|
+
if (!errorMessages[errorKey]) {
|
|
212
|
+
return `Missing error message to the error with key ${errorKey}`;
|
|
213
|
+
}
|
|
214
|
+
return errorMessages[errorKey].replace(/{{(\w+)}}/g, (placeholderWithDelimiters, placeholderWithoutDelimiters) => replacements[placeholderWithoutDelimiters] ? replacements[placeholderWithoutDelimiters] : placeholderWithDelimiters);
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
class AbstractInputComponent {
|
|
218
|
-
set errorMessage(errorMessage) {
|
|
219
|
-
this.errorMessage$.next(errorMessage);
|
|
220
|
-
}
|
|
221
|
-
constructor(controlContainer) {
|
|
222
|
-
this.controlContainer = controlContainer;
|
|
223
|
-
this.formControlName = '';
|
|
224
|
-
this.label = '';
|
|
225
|
-
this.readonly = false;
|
|
226
|
-
this.required = false;
|
|
227
|
-
this.disabled = false;
|
|
228
|
-
this.destroy$ = new Subject();
|
|
229
|
-
this.errorMessage$ = new BehaviorSubject('');
|
|
230
|
-
this.model$ = combineLatest({
|
|
231
|
-
errorMessage: this.errorMessage$
|
|
232
|
-
});
|
|
233
|
-
}
|
|
234
|
-
ngOnInit() {
|
|
235
|
-
if (this.controlContainer?.control instanceof FormArray) {
|
|
236
|
-
this.parentControl = this.controlContainer?.control.at(+this.formControlName);
|
|
237
|
-
}
|
|
238
|
-
else {
|
|
239
|
-
this.parentControl = this.controlContainer?.control?.get(this.formControlName);
|
|
240
|
-
}
|
|
241
|
-
this.setRequiredState();
|
|
242
|
-
this.listenStatusChanges();
|
|
243
|
-
}
|
|
244
|
-
setRequiredState() {
|
|
245
|
-
if (!this.parentControl || !this.parentControl?.validator) {
|
|
246
|
-
return;
|
|
247
|
-
}
|
|
248
|
-
const validators = this.parentControl?.validator({ value: '' });
|
|
249
|
-
if (validators && Object.keys(validators).includes('required')) {
|
|
250
|
-
this.required = true;
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
onBlur() {
|
|
254
|
-
if (this.onTouched) {
|
|
255
|
-
this.onTouched();
|
|
256
|
-
}
|
|
257
|
-
this.setErrors();
|
|
258
|
-
}
|
|
259
|
-
registerOnChange(fn) {
|
|
260
|
-
this.onChange = fn;
|
|
261
|
-
}
|
|
262
|
-
registerOnTouched(fn) {
|
|
263
|
-
this.onTouched = fn;
|
|
264
|
-
}
|
|
265
|
-
setDisabledState(isDisabled) {
|
|
266
|
-
this.disabled = isDisabled;
|
|
267
|
-
}
|
|
268
|
-
listenStatusChanges() {
|
|
269
|
-
this.parentControl?.statusChanges.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.setErrors());
|
|
270
|
-
}
|
|
271
|
-
setErrors() {
|
|
272
|
-
if (this.parentControl?.errors) {
|
|
273
|
-
const errorKey = Object.keys(this.parentControl?.errors)[0];
|
|
274
|
-
const errorObj = this.parentControl?.errors[`${errorKey}`];
|
|
275
|
-
this.errorMessage$.next(getErrorMessage(errorKey, {
|
|
276
|
-
fieldName: this.label,
|
|
277
|
-
...errorObj
|
|
278
|
-
}));
|
|
279
|
-
}
|
|
280
|
-
else {
|
|
281
|
-
this.errorMessage$.next('');
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
ngOnDestroy() {
|
|
285
|
-
this.destroy$.next();
|
|
286
|
-
this.destroy$.complete();
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
292
|
-
type: Directive
|
|
293
|
-
}], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
|
|
294
|
-
type: Optional
|
|
295
|
-
}] }]; }, propDecorators: { formControlName: [{
|
|
296
|
-
type: Input
|
|
297
|
-
}], errorMessage: [{
|
|
298
|
-
type: Input
|
|
299
|
-
}], label: [{
|
|
300
|
-
type: Input
|
|
301
|
-
}], readonly: [{
|
|
302
|
-
type: Input
|
|
303
|
-
}], required: [{
|
|
304
|
-
type: Input
|
|
305
|
-
}], disabled: [{
|
|
306
|
-
type: Input
|
|
217
|
+
class AbstractInputComponent {
|
|
218
|
+
set errorMessage(errorMessage) {
|
|
219
|
+
this.errorMessage$.next(errorMessage);
|
|
220
|
+
}
|
|
221
|
+
constructor(controlContainer) {
|
|
222
|
+
this.controlContainer = controlContainer;
|
|
223
|
+
this.formControlName = '';
|
|
224
|
+
this.label = '';
|
|
225
|
+
this.readonly = false;
|
|
226
|
+
this.required = false;
|
|
227
|
+
this.disabled = false;
|
|
228
|
+
this.destroy$ = new Subject();
|
|
229
|
+
this.errorMessage$ = new BehaviorSubject('');
|
|
230
|
+
this.model$ = combineLatest({
|
|
231
|
+
errorMessage: this.errorMessage$
|
|
232
|
+
});
|
|
233
|
+
}
|
|
234
|
+
ngOnInit() {
|
|
235
|
+
if (this.controlContainer?.control instanceof FormArray) {
|
|
236
|
+
this.parentControl = this.controlContainer?.control.at(+this.formControlName);
|
|
237
|
+
}
|
|
238
|
+
else {
|
|
239
|
+
this.parentControl = this.controlContainer?.control?.get(this.formControlName);
|
|
240
|
+
}
|
|
241
|
+
this.setRequiredState();
|
|
242
|
+
this.listenStatusChanges();
|
|
243
|
+
}
|
|
244
|
+
setRequiredState() {
|
|
245
|
+
if (!this.parentControl || !this.parentControl?.validator) {
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
const validators = this.parentControl?.validator({ value: '' });
|
|
249
|
+
if (validators && Object.keys(validators).includes('required')) {
|
|
250
|
+
this.required = true;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
onBlur() {
|
|
254
|
+
if (this.onTouched) {
|
|
255
|
+
this.onTouched();
|
|
256
|
+
}
|
|
257
|
+
this.setErrors();
|
|
258
|
+
}
|
|
259
|
+
registerOnChange(fn) {
|
|
260
|
+
this.onChange = fn;
|
|
261
|
+
}
|
|
262
|
+
registerOnTouched(fn) {
|
|
263
|
+
this.onTouched = fn;
|
|
264
|
+
}
|
|
265
|
+
setDisabledState(isDisabled) {
|
|
266
|
+
this.disabled = isDisabled;
|
|
267
|
+
}
|
|
268
|
+
listenStatusChanges() {
|
|
269
|
+
this.parentControl?.statusChanges.pipe(takeUntil$1(this.destroy$)).subscribe(() => this.setErrors());
|
|
270
|
+
}
|
|
271
|
+
setErrors() {
|
|
272
|
+
if (this.parentControl?.errors) {
|
|
273
|
+
const errorKey = Object.keys(this.parentControl?.errors)[0];
|
|
274
|
+
const errorObj = this.parentControl?.errors[`${errorKey}`];
|
|
275
|
+
this.errorMessage$.next(getErrorMessage(errorKey, {
|
|
276
|
+
fieldName: this.label,
|
|
277
|
+
...errorObj
|
|
278
|
+
}));
|
|
279
|
+
}
|
|
280
|
+
else {
|
|
281
|
+
this.errorMessage$.next('');
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
ngOnDestroy() {
|
|
285
|
+
this.destroy$.next();
|
|
286
|
+
this.destroy$.complete();
|
|
287
|
+
}
|
|
288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractInputComponent, deps: [{ token: i1.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
289
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractInputComponent, inputs: { formControlName: "formControlName", errorMessage: "errorMessage", label: "label", readonly: "readonly", required: "required", disabled: "disabled" }, ngImport: i0 }); }
|
|
290
|
+
}
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractInputComponent, decorators: [{
|
|
292
|
+
type: Directive
|
|
293
|
+
}], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
|
|
294
|
+
type: Optional
|
|
295
|
+
}] }]; }, propDecorators: { formControlName: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], errorMessage: [{
|
|
298
|
+
type: Input
|
|
299
|
+
}], label: [{
|
|
300
|
+
type: Input
|
|
301
|
+
}], readonly: [{
|
|
302
|
+
type: Input
|
|
303
|
+
}], required: [{
|
|
304
|
+
type: Input
|
|
305
|
+
}], disabled: [{
|
|
306
|
+
type: Input
|
|
307
307
|
}] } });
|
|
308
308
|
|
|
309
|
-
class NgilUiCommonFormCvaModule {
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
315
|
-
type: NgModule,
|
|
316
|
-
args: [{
|
|
317
|
-
imports: [CommonModule]
|
|
318
|
-
}]
|
|
309
|
+
class NgilUiCommonFormCvaModule {
|
|
310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgilUiCommonFormCvaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
311
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgilUiCommonFormCvaModule, imports: [CommonModule] }); }
|
|
312
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgilUiCommonFormCvaModule, imports: [CommonModule] }); }
|
|
313
|
+
}
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgilUiCommonFormCvaModule, decorators: [{
|
|
315
|
+
type: NgModule,
|
|
316
|
+
args: [{
|
|
317
|
+
imports: [CommonModule]
|
|
318
|
+
}]
|
|
319
319
|
}] });
|
|
320
320
|
|
|
321
|
-
function createControlValueAccessorProviders(component) {
|
|
322
|
-
return [
|
|
323
|
-
{
|
|
324
|
-
provide: NG_VALUE_ACCESSOR,
|
|
325
|
-
useExisting: forwardRef(() => component),
|
|
326
|
-
multi: true
|
|
327
|
-
},
|
|
328
|
-
{
|
|
329
|
-
provide: NG_VALIDATORS,
|
|
330
|
-
useExisting: forwardRef(() => component),
|
|
331
|
-
multi: true
|
|
332
|
-
}
|
|
333
|
-
];
|
|
321
|
+
function createControlValueAccessorProviders(component) {
|
|
322
|
+
return [
|
|
323
|
+
{
|
|
324
|
+
provide: NG_VALUE_ACCESSOR,
|
|
325
|
+
useExisting: forwardRef(() => component),
|
|
326
|
+
multi: true
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
provide: NG_VALIDATORS,
|
|
330
|
+
useExisting: forwardRef(() => component),
|
|
331
|
+
multi: true
|
|
332
|
+
}
|
|
333
|
+
];
|
|
334
334
|
}
|
|
335
335
|
|
|
336
|
-
/**
|
|
337
|
-
* Generated bundle index. Do not edit.
|
|
336
|
+
/**
|
|
337
|
+
* Generated bundle index. Do not edit.
|
|
338
338
|
*/
|
|
339
339
|
|
|
340
340
|
export { AbstractFormArrayComponent, AbstractFormComponent, AbstractFormGroupComponent, AbstractInputComponent, NgilUiCommonFormCvaModule, createControlValueAccessorProviders };
|