refactor: alter to match usage described by @jerbob, and extract error logic into own package

Author: Oliver Strik

.gitignore

@@ -55,3 +55,6 @@ Thumbs.db
 # direnv / nix
 .direnv/*
 .envrc
+
+# @olistrik
+.vimignore

projects/demo/src/app/on-submit-errors/on-submit-errors.component.html

@@ -5,5 +5,5 @@
 	<klp-sub-form [injectInto]="form" at="nested">
 		<app-sub-form-example></app-sub-form-example>
 	</klp-sub-form>
-	<klp-form-submit-button [submitCallback]="onSubmit">submit</klp-form-submit-button>
+	<klp-form-submit-button [before]="beforeSubmit" [submitCallback]="onSubmit">submit</klp-form-submit-button>
 </klp-form>

projects/demo/src/app/on-submit-errors/on-submit-errors.component.ts

@@ -1,10 +1,50 @@
 import {Component, inject } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { FormErrorHandler, FormValidationError, FormValidationErrors, KLP_FORM_ERROR_HANDLER } from '@klippa/ngx-enhancy-forms';
+
+// this is a little like an error from GQL.
+type LocationErrors = {
+	kind: 'LOCATION_ERRORS',
+	errors: Array<{
+		message: any,
+		location: Array<string>;
+	}>;
+};
+
+async function someApiCall(value: {name: string, nested: { name: string }}) {
+		const locationErrors: LocationErrors = {
+			kind: 'LOCATION_ERRORS',
+			errors: [],
+		};
+		if (value.name !== 'bob')		{
+			locationErrors.errors.push({location: ['name'], message: 'must be bob'});
+		}
+
+		if (value.nested.name === 'fred') {
+			locationErrors.errors.push({location: ['nested', 'name'], message: 'cannot be fred'});
+		}
+
+		throw locationErrors;
+}
+
+const LocationErrorHandler: FormErrorHandler = (error: any): FormValidationErrors => {
+	if (error?.kind === 'LOCATION_ERRORS') {
+		return (error as LocationErrors).errors.map(e => new FormValidationError(
+				e.location.join('.'),
+				e.message,
+			));
+	}
+
+ throw error;
+ };
 
 @Component({
   selector: 'app-on-submit-errors',
   templateUrl: './on-submit-errors.component.html',
-  styleUrls: ['./on-submit-errors.component.scss']
+  styleUrls: ['./on-submit-errors.component.scss'],
+	providers: [
+		{provide: KLP_FORM_ERROR_HANDLER, useValue: LocationErrorHandler },
+	]
 })
 export class OnSubmitErrorsComponent {
 	private fb = inject(FormBuilder);
@@ -25,22 +65,11 @@ export class OnSubmitErrorsComponent {
 		);
 	}
 
-	protected onSubmit = async (value: any) => {
-		const err: any = {};
-		if (value.name !== 'bob') {
-			err.name = 'must be bob';
-		}
-
-		if (value.nested.name === 'fred') {
-			err['nested.name'] = 'cannot be fred';
-		}
-
-		if (value.nested.name !== 'greg') {
-			err.nested = {
-				name: 'cannot be fred'
-			};
-		}
+	protected beforeSubmit = async () => {
+		throw new Error('bar');
+	}
 
-		throw err;
+	protected onSubmit = async (value: any) => {
+		await someApiCall(value);
 	}
 }

projects/klippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.ts

@@ -1,7 +1,7 @@
-import { Component, Host, HostBinding, Input, Optional } from '@angular/core';
+import { Component, HostBinding, inject, Input } from '@angular/core';
 import {FormComponent, invalidFieldsSymbol} from '../form.component';
-import {isNullOrUndefined} from '../../util/values';
 import { ButtonVariant } from '../../elements/button/button.component';
+import { DefaultErrorHandler, FormValidationError, KLP_FORM_ERROR_HANDLER } from '../form-validation-error/form-validation-error';
 
 export type SubmitButtonVariant = Extract<ButtonVariant,
 	| 'greenFilled'
@@ -16,25 +16,22 @@ export type SubmitButtonVariant = Extract<ButtonVariant,
 	styleUrls: ['./form-submit-button.component.scss'],
 })
 export class FormSubmitButtonComponent {
+	private parentForm = inject(FormComponent, {host: true, optional: true});
+	private handleError = inject(KLP_FORM_ERROR_HANDLER, {optional: true}) ?? DefaultErrorHandler;
 
-	@HostBinding('class._fullWidth') get _() {
-		return this.fullWidth;
-	}
-
-	constructor(@Host() @Optional() private parentForm: FormComponent) {}
 	@Input() public isLoading = false;
-	@Input() fullWidth = false;
-	@Input() variant: SubmitButtonVariant = 'greenFilled';
+	@Input() @HostBinding('class._fullWidth') public fullWidth = false;
+	@Input() public variant: SubmitButtonVariant = 'greenFilled';
 	@Input() public submitCallback: (renderedAndEnabledValues: object, renderedButDisabledValues: object) => Promise<any>;
 	@Input() public before: () => Promise<any> = () => Promise.resolve();
 	@Input() public after: () => Promise<any> = () => Promise.resolve();
 
+	private renderError = (e: FormValidationError) => {
+		this.parentForm.formGroup.get(e.path)?.setErrors({ message: { value: e.message }});
+	}
+
 	async submitForm(): Promise<void> {
-		try {
-			await this.before();
-		} catch (e) {
-			return;
-		}
+		await this.before().catch(() => null);
 
 		try {
 			const [renderedAndEnabledValues, renderedValues] = await this.parentForm.trySubmit();
@@ -45,7 +42,8 @@ export class FormSubmitButtonComponent {
 			if (e === invalidFieldsSymbol) {
 				return;
 			}
-			throw e;
+			this.handleError(e).forEach(this.renderError);
+			return;
 		}
 
 		await this.after();

projects/klippa/ngx-enhancy-forms/src/lib/form/form-validation-error/form-validation-error.ts

@@ -0,0 +1,36 @@
+import { InjectionToken } from '@angular/core';
+
+export class FormValidationError extends Error {
+	_path: string;
+	_message: string;
+
+	constructor(path: string, message: string) {
+		super(message);
+		this.name = 'FORM_VALIDATION_ERROR';
+		this._path = path;
+		this._message = message;
+	}
+
+	get path() {
+		return this._path;
+	}
+}
+
+export type FormValidationErrors = Array<FormValidationError>;
+
+export type FormErrorHandler = (error: any) => FormValidationErrors;
+
+export const KLP_FORM_ERROR_HANDLER = new InjectionToken<FormErrorHandler>('KLP_FORM_ERROR_HANDLER');
+
+export const DefaultErrorHandler: FormErrorHandler = (error: any) => {
+	if (Array.isArray(error) && error.reduce((acc, err) => acc && err instanceof FormValidationError)) {
+		// If the error is an array of FormValidationErrors, then pass it along.
+		return error;
+	} else if (error instanceof FormValidationError) {
+		// If the error is a FormValidationError, then wrap it and pass it on.
+		return [error];
+	}
+
+	throw error;
+};
+

projects/klippa/ngx-enhancy-forms/src/public-api.ts

@@ -31,6 +31,7 @@ export * from './lib/form/form-caption/form-caption.component';
 export * from './lib/form/form-element/form-element.component';
 export * from './lib/form/form-error/form-error.component';
 export * from './lib/form/form-submit-button/form-submit-button.component';
+export * from './lib/form/form-validation-error/form-validation-error';
 
 export * from './lib/validators/dateValidator';