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

   1 import { FormGroup } from '@angular/forms'
   2 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
   3 import { FormValidatorService } from './form-validator.service'
   4
   5 export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
   6 export type FormReactiveValidationMessages = {
   7   [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
   8 }
   9
  10 export abstract class FormReactive {
  11   protected abstract formValidatorService: FormValidatorService
  12   protected formChanged = false
  13
  14   form: FormGroup
  15   formErrors: any // To avoid casting in template because of string | FormReactiveErrors
  16   validationMessages: FormReactiveValidationMessages
  17
  18   buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
  19     const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
  20
  21     this.form = form
  22     this.formErrors = formErrors
  23     this.validationMessages = validationMessages
  24
  25     this.form.valueChanges.subscribe(() => this.onValueChanged(this.form, this.formErrors, this.validationMessages, false))
  26   }
  27
  28   protected forceCheck () {
  29     return this.onValueChanged(this.form, this.formErrors, this.validationMessages, true)
  30   }
  31
  32   protected check () {
  33     return this.onValueChanged(this.form, this.formErrors, this.validationMessages, false)
  34   }
  35
  36   private onValueChanged (
  37     form: FormGroup,
  38     formErrors: FormReactiveErrors,
  39     validationMessages: FormReactiveValidationMessages,
  40     forceCheck = false
  41   ) {
  42     for (const field of Object.keys(formErrors)) {
  43       if (formErrors[field] && typeof formErrors[field] === 'object') {
  44         this.onValueChanged(
  45           form.controls[field] as FormGroup,
  46           formErrors[field] as FormReactiveErrors,
  47           validationMessages[field] as FormReactiveValidationMessages,
  48           forceCheck
  49         )
  50         continue
  51       }
  52
  53       // clear previous error message (if any)
  54       formErrors[field] = ''
  55       const control = form.get(field)
  56
  57       if (control.dirty) this.formChanged = true
  58
  59       if (forceCheck) control.updateValueAndValidity({ emitEvent: false })
  60       if (!control || !control.dirty || !control.enabled || control.valid) continue
  61
  62       const staticMessages = validationMessages[field]
  63       for (const key of Object.keys(control.errors)) {
  64         const formErrorValue = control.errors[key]
  65
  66         // Try to find error message in static validation messages first
  67         // Then check if the validator returns a string that is the error
  68         if (typeof formErrorValue === 'boolean') formErrors[field] += staticMessages[key] + ' '
  69         else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
  70         else throw new Error('Form error value of ' + field + ' is invalid')
  71       }
  72     }
  73   }
  74
  75 }