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

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