From 5c5bcea2e64daf0a66a796c89432732ed27308d2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 7 Oct 2022 15:26:53 +0200 Subject: Refactor form reactive --- .../shared/shared-forms/form-reactive.service.ts | 2 +- .../src/app/shared/shared-forms/form-reactive.ts | 82 +++------------------- 2 files changed, 9 insertions(+), 75 deletions(-) (limited to 'client/src/app/shared/shared-forms') diff --git a/client/src/app/shared/shared-forms/form-reactive.service.ts b/client/src/app/shared/shared-forms/form-reactive.service.ts index 69077eb07..f1b7e0ef2 100644 --- a/client/src/app/shared/shared-forms/form-reactive.service.ts +++ b/client/src/app/shared/shared-forms/form-reactive.service.ts @@ -56,7 +56,7 @@ export class FormReactiveService { } } - protected forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) { + forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) { this.onStatusChanged({ form, formErrors, validationMessages, onlyDirty: false }) } diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts index acaeaba33..d1e7be802 100644 --- a/client/src/app/shared/shared-forms/form-reactive.ts +++ b/client/src/app/shared/shared-forms/form-reactive.ts @@ -1,11 +1,9 @@ -import { AbstractControl, FormGroup } from '@angular/forms' -import { wait } from '@root-helpers/utils' +import { FormGroup } from '@angular/forms' import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model' -import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive.service' -import { FormValidatorService } from './form-validator.service' +import { FormReactiveService, FormReactiveValidationMessages } from './form-reactive.service' export abstract class FormReactive { - protected abstract formValidatorService: FormValidatorService + protected abstract formReactiveService: FormReactiveService protected formChanged = false form: FormGroup @@ -13,86 +11,22 @@ export abstract class FormReactive { validationMessages: FormReactiveValidationMessages buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) { - const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues) + const { formErrors, validationMessages, form } = this.formReactiveService.buildForm(obj, defaultValues) this.form = form this.formErrors = formErrors this.validationMessages = validationMessages - - this.form.statusChanges.subscribe(async () => { - // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed - await this.waitPendingCheck() - - this.onStatusChanged(this.form, this.formErrors, this.validationMessages) - }) } protected async waitPendingCheck () { - if (this.form.status !== 'PENDING') return - - // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519 - // return firstValueFrom(this.form.statusChanges.pipe(filter(status => status !== 'PENDING'))) - // So we have to fallback to active wait :/ - - do { - await wait(10) - } while (this.form.status === 'PENDING') + return this.formReactiveService.waitPendingCheck(this.form) } - protected markAllAsDirty (controlsArg?: { [ key: string ]: AbstractControl }) { - const controls = controlsArg || this.form.controls - - for (const key of Object.keys(controls)) { - const control = controls[key] - - if (control instanceof FormGroup) { - this.markAllAsDirty(control.controls) - continue - } - - control.markAsDirty() - } + protected markAllAsDirty () { + return this.formReactiveService.markAllAsDirty(this.form.controls) } protected forceCheck () { - this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false) - } - - private onStatusChanged ( - form: FormGroup, - formErrors: FormReactiveErrors, - validationMessages: FormReactiveValidationMessages, - onlyDirty = true - ) { - for (const field of Object.keys(formErrors)) { - if (formErrors[field] && typeof formErrors[field] === 'object') { - this.onStatusChanged( - form.controls[field] as FormGroup, - formErrors[field] as FormReactiveErrors, - validationMessages[field] as FormReactiveValidationMessages, - onlyDirty - ) - continue - } - - // clear previous error message (if any) - formErrors[field] = '' - const control = form.get(field) - - if (control.dirty) this.formChanged = true - - if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue - - const staticMessages = validationMessages[field] - for (const key of Object.keys(control.errors)) { - const formErrorValue = control.errors[key] - - // Try to find error message in static validation messages first - // Then check if the validator returns a string that is the error - if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' ' - else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key] - else throw new Error('Form error value of ' + field + ' is invalid') - } - } + return this.formReactiveService.forceCheck(this.form, this.formErrors, this.validationMessages) } } -- cgit v1.2.3