client/src/app/shared/shared-forms/form-reactive.ts

   1
   2 import { FormGroup } from '@angular/forms'
   3 import { wait } from '@root-helpers/utils'
   4 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
   5 import { FormValidatorService } from './form-validator.service'
   6
   7 export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
   8 export type FormReactiveValidationMessages = {
   9   [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
  10 }
  11
  12 export abstract class FormReactive {
  13   protected abstract formValidatorService: FormValidatorService
  14   protected formChanged = false
  15
  16   form: FormGroup
  17   formErrors: any // To avoid casting in template because of string | FormReactiveErrors
  18   validationMessages: FormReactiveValidationMessages
  19
  20   buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
  21     const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
  22
  23     this.form = form
  24     this.formErrors = formErrors
  25     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   }
  34
  35   protected async waitPendingCheck () {
  36     if (this.form.status !== 'PENDING') return
  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   }
  46
  47   protected forceCheck () {
  48     this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false)
  49   }
  50
  51   private onStatusChanged (
  52     form: FormGroup,
  53     formErrors: FormReactiveErrors,
  54     validationMessages: FormReactiveValidationMessages,
  55     onlyDirty = true
  56   ) {
  57     for (const field of Object.keys(formErrors)) {
  58       if (formErrors[field] && typeof formErrors[field] === 'object') {
  59         this.onStatusChanged(
  60           form.controls[field] as FormGroup,
  61           formErrors[field] as FormReactiveErrors,
  62           validationMessages[field] as FormReactiveValidationMessages
  63         )
  64         continue
  65       }
  66
  67       // clear previous error message (if any)
  68       formErrors[field] = ''
  69       const control = form.get(field)
  70
  71       if (control.dirty) this.formChanged = true
  72
  73       if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
  74
  75       const staticMessages = validationMessages[field]
  76       for (const key of Object.keys(control.errors)) {
  77         const formErrorValue = control.errors[key]
  78
  79         // Try to find error message in static validation messages first
  80         // Then check if the validator returns a string that is the error
  81         if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' '
  82         else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
  83         else throw new Error('Form error value of ' + field + ' is invalid')
  84       }
  85     }
  86   }
  87 }