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

   1
   2 import { AbstractControl, 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 markAllAsDirty (controlsArg?: { [ key: string ]: AbstractControl }) {
  48     const controls = controlsArg || 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   }
  61
  62   protected forceCheck () {
  63     this.onStatusChanged(this.form, this.formErrors, this.validationMessages, false)
  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   }
 103 }