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'
7 export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
8 export type FormReactiveValidationMessages = {
9 [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
13 export class FormReactiveService {
15 constructor (private formValidatorService: FormValidatorService) {
19 buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
20 const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
22 form.statusChanges.subscribe(async () => {
23 // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
24 await this.waitPendingCheck(form)
26 this.onStatusChanged({ form, formErrors, validationMessages })
29 return { form, formErrors, validationMessages }
32 async waitPendingCheck (form: FormGroup) {
33 if (form.status !== 'PENDING') return
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 :/
41 } while (form.status === 'PENDING')
44 markAllAsDirty (controlsArg: { [ key: string ]: AbstractControl }) {
45 const controls = controlsArg
47 for (const key of Object.keys(controls)) {
48 const control = controls[key]
50 if (control instanceof FormGroup) {
51 this.markAllAsDirty(control.controls)
59 forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) {
60 this.onStatusChanged({ form, formErrors, validationMessages, onlyDirty: false })
63 private onStatusChanged (options: {
65 formErrors: FormReactiveErrors
66 validationMessages: FormReactiveValidationMessages
67 onlyDirty?: boolean // default true
69 const { form, formErrors, validationMessages, onlyDirty = true } = options
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,
83 // clear previous error message (if any)
84 formErrors[field] = ''
85 const control = form.get(field)
87 if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
89 const staticMessages = validationMessages[field]
90 for (const key of Object.keys(control.errors)) {
91 const formErrorValue = control.errors[key]
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')