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       // Don't care if dirty on force check
  60       const isDirty = control.dirty || forceCheck === true
  61       if (control && isDirty && control.enabled && !control.valid) {
  62         const messages = validationMessages[ field ]
  63         for (const key of Object.keys(control.errors)) {
  64           formErrors[ field ] += messages[ key ] + ' '
  65         }
  66       }
  67     }
  68   }
  69
  70 }