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

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