support submitting only via the submit button and not on enter

klippa-app · Jul 31, 2024 · dea3dde · dea3dde
1 parent 7e1f4c1
commit dea3dde
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -1,5 +1,5 @@
 
-<klp-form [formGroup]="myForm" [warnings]="formWarnings" errorMessageLocation="rightOfCaption" [readOnly]="false">
+<klp-form [formGroup]="myForm" [warnings]="formWarnings" errorMessageLocation="rightOfCaption" [readOnly]="false" allowSubmitOn="buttonOnly">
 	<div style="height: 520px; overflow: auto; display: flex; gap: 30px">
 		<app-deep-input  *ngIf="false" >
 		</app-deep-input>
@@ -211,7 +211,7 @@
 
 simple form with form level errors
 
-<klp-form [formGroup]="simpleFormWithFormLevelErrors" [errors]="formErrors" errorMessageLocation="rightOfCaption">
+<klp-form [formGroup]="simpleFormWithFormLevelErrors" [errors]="formErrors" errorMessageLocation="rightOfCaption" allowSubmitOn="buttonOnly">
 	<klp-form-element caption="First name" spaceDistribution="34-66" direction="vertical">
 		<klp-form-text-input formControlName="firstName" [clearable]="true">
 		</klp-form-text-input>

diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.22.13",
+  "version": "14.22.14",
   "publishConfig": {
     "access": "public"
   },

diff --git a/...lippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.html b/...lippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.html
@@ -4,7 +4,7 @@
 		[disabled]="isLoading || disabled"
 		[isLoading]="isLoading"
 		[fullWidth]="fullWidth"
-		type="submit"
+		[type]="buttonType"
 		[ngClass]="fullWidth ? 'fullWidth' : ''"
 	>
 	<ng-content></ng-content>

diff --git a/.../klippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.ts b/.../klippa/ngx-enhancy-forms/src/lib/form/form-submit-button/form-submit-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, inject, Input } from '@angular/core';
+import {Component, HostBinding, inject, Input, OnInit} from '@angular/core';
 import {FormComponent, invalidFieldsSymbol} from '../form.component';
 import { ButtonVariant } from '../../elements/button/button.component';
 import { DefaultErrorHandler, FormValidationError, KLP_FORM_ERROR_HANDLER } from '../form-validation-error/form-validation-error';
@@ -15,9 +15,10 @@ export type SubmitButtonVariant = Extract<ButtonVariant,
 	templateUrl: './form-submit-button.component.html',
 	styleUrls: ['./form-submit-button.component.scss'],
 })
-export class FormSubmitButtonComponent {
+export class FormSubmitButtonComponent implements OnInit{
 	private parentForm = inject(FormComponent, {optional: true});
 	private handleError = inject(KLP_FORM_ERROR_HANDLER, {optional: true}) ?? DefaultErrorHandler;
+	public buttonType: 'submit' | 'button' = 'submit';
 
 	@Input() public isLoading = false;
 	@Input() @HostBinding('class._fullWidth') public fullWidth = false;
@@ -27,6 +28,14 @@ export class FormSubmitButtonComponent {
 	@Input() public after: () => Promise<any> = () => Promise.resolve();
 	@Input() public disabled: boolean = false;
 
+	ngOnInit(): void {
+		if (this.parentForm.allowSubmitOn === 'buttonOnly') {
+			this.buttonType = 'button';
+		} else {
+			this.buttonType = 'submit';
+		}
+	}
+
 	private setValidationError = (e: FormValidationError) => {
 		this.parentForm.formGroup.get(e.path)?.setErrors({ message: { value: e.message }});
 	}

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts
@@ -39,6 +39,7 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 	@Input() public warnings: Map<AbstractControl, string | TemplateRef<any>> = new Map<AbstractControl, string | TemplateRef<any>>();
 	@Input() public errors: Map<AbstractControl, string> = new Map<AbstractControl, string>();
 	@Input() public patchValueInterceptor: (values: any) => Promise<any>;
+	@Input() public allowSubmitOn: 'buttonAndEnter' | 'buttonOnly' = 'buttonAndEnter';
 	@Output() public onInjected = new EventEmitter<Record<string, any>>();
 
 	// we keep track of what form controls are actually rendered. Only those count when looking at form validation