aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-forms/form-reactive.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/shared-forms/form-reactive.ts')
-rw-r--r--client/src/app/shared/shared-forms/form-reactive.ts87
1 files changed, 8 insertions, 79 deletions
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index a19ffdd82..d1e7be802 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -1,16 +1,9 @@
1 1import { FormGroup } from '@angular/forms'
2import { AbstractControl, FormGroup } from '@angular/forms'
3import { wait } from '@root-helpers/utils'
4import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model' 2import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
5import { FormValidatorService } from './form-validator.service' 3import { FormReactiveService, FormReactiveValidationMessages } from './form-reactive.service'
6
7export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
8export type FormReactiveValidationMessages = {
9 [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
10}
11 4
12export abstract class FormReactive { 5export abstract class FormReactive {
13 protected abstract formValidatorService: FormValidatorService 6 protected abstract formReactiveService: FormReactiveService
14 protected formChanged = false 7 protected formChanged = false
15 8
16 form: FormGroup 9 form: FormGroup
@@ -18,86 +11,22 @@ export abstract class FormReactive {
18 validationMessages: FormReactiveValidationMessages 11 validationMessages: FormReactiveValidationMessages
19 12
20 buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) { 13 buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
21 const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues) 14 const { formErrors, validationMessages, form } = this.formReactiveService.buildForm(obj, defaultValues)
22 15
23 this.form = form 16 this.form = form
24 this.formErrors = formErrors 17 this.formErrors = formErrors
25 this.validationMessages = validationMessages 18 this.validationMessages = validationMessages
26
27 this.form.statusChanges.subscribe(async () => {
28 // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
29 await this.waitPendingCheck()
30
31 this.onStatusChanged(this.form, this.formErrors, this.validationMessages)
32 })
33 } 19 }
34 20
35 protected async waitPendingCheck () { 21 protected async waitPendingCheck () {
36 if (this.form.status !== 'PENDING') return 22 return this.formReactiveService.waitPendingCheck(this.form)
37
38 // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519
39 // return firstValueFrom(this.form.statusChanges.pipe(filter(status => status !== 'PENDING')))
40 // So we have to fallback to active wait :/
41
42 do {
43 await wait(10)
44 } while (this.form.status === 'PENDING')
45 } 23 }
46 24
47 protected markAllAsDirty (controlsArg?: { [ key: string ]: AbstractControl }) { 25 protected markAllAsDirty () {
48 const controls = controlsArg || this.form.controls 26 return this.formReactiveService.markAllAsDirty(this.form.controls)
49
50 for (const key of Object.keys(controls)) {
51 const control = controls[key]
52
53 if (control instanceof FormGroup) {
54 this.markAllAsDirty(control.controls)
55 continue
56 }
57
58 control.markAsDirty()
59 }
60 } 27 }
61 28
62 protected forceCheck () { 29 protected forceCheck () {
63 this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false) 30 return this.formReactiveService.forceCheck(this.form, this.formErrors, this.validationMessages)
64 }
65
66 private onStatusChanged (
67 form: FormGroup,
68 formErrors: FormReactiveErrors,
69 validationMessages: FormReactiveValidationMessages,
70 onlyDirty = true
71 ) {
72 for (const field of Object.keys(formErrors)) {
73 if (formErrors[field] && typeof formErrors[field] === 'object') {
74 this.onStatusChanged(
75 form.controls[field] as FormGroup,
76 formErrors[field] as FormReactiveErrors,
77 validationMessages[field] as FormReactiveValidationMessages,
78 onlyDirty
79 )
80 continue
81 }
82
83 // clear previous error message (if any)
84 formErrors[field] = ''
85 const control = form.get(field)
86
87 if (control.dirty) this.formChanged = true
88
89 if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
90
91 const staticMessages = validationMessages[field]
92 for (const key of Object.keys(control.errors)) {
93 const formErrorValue = control.errors[key]
94
95 // Try to find error message in static validation messages first
96 // Then check if the validator returns a string that is the error
97 if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' '
98 else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
99 else throw new Error('Form error value of ' + field + ' is invalid')
100 }
101 }
102 } 31 }
103} 32}