support formLevel errors

projects/demo/src/app/demo/demo.component.html

@@ -193,3 +193,18 @@
 <ng-template #myFancyTemplate>
  This can be <span style="color: red;">ANYTHING</span>. <span style="color: green; font-weight: bold; font-size: 1.2rem;">Look at me me, i am BOLD AND GREEN</span>
 </ng-template>
+
+simple form with form level errors
+
+<klp-form [formGroup]="simpleFormWithFormLevelErrors" [errors]="formErrors" errorMessageLocation="rightOfCaption">
+ <klp-form-element caption="First name" spaceDistribution="34-66" direction="vertical">
+ <klp-form-text-input formControlName="firstName" [clearable]="true">
+ </klp-form-text-input>
+ </klp-form-element>
+ <klp-form-element caption="Last name" spaceDistribution="34-66" direction="vertical">
+ <klp-form-text-input formControlName="lastName" [clearable]="true">
+ </klp-form-text-input>
+ </klp-form-element>
+
+ <klp-form-submit-button [submitCallback]="saveSimple">Save</klp-form-submit-button>
+</klp-form>

projects/demo/src/app/demo/demo.component.ts

@@ -10,6 +10,7 @@ import {AppSelectOptions, SelectComponent} from '@klippa/ngx-enhancy-forms';
 export class DemoComponent {
  @ViewChild('myFancyTemplate') myFancyTemplate: TemplateRef<any>;
  public formWarnings = new Map<AbstractControl, string | TemplateRef<any>>();
+ public formErrors = new Map<AbstractControl, string>();
  constructor(private fb: FormBuilder) {
 
  setTimeout(() => {
@@ -79,7 +80,7 @@ export class DemoComponent {
  show = false;
  isChecked: boolean = undefined;
 
- private nameConfig = ['', [Validators.required, Validators.minLength(4)],
+ private nameConfig = ['', [],
  [(e) => {
  if (e.value?.length > 5) {
  return Promise.resolve();
@@ -93,7 +94,7 @@ export class DemoComponent {
  if (e.value?.length > 2) {
  return Promise.resolve({async: 'daapaaa aaaaaaap aaaaap'});
  }
- return Promise.resolve({async: 'aapaaa '});
+ return Promise.resolve({});
  }]
  ];
 
@@ -123,6 +124,11 @@ export class DemoComponent {
  radioOption: null
  });
 
+ public simpleFormWithFormLevelErrors = this.fb.group({
+ firstName: ['', [Validators.required]],
+ lastName: [''],
+ });
+
  subForms = [];
  options: AppSelectOptions = [
  {id: 1, name: 'dra'},
@@ -234,6 +240,19 @@ export class DemoComponent {
  await new Promise(resolve => setTimeout(resolve, 1000));
  throw new Error('some error');
  }
+ public saveSimple = async () => {
+ console.log('saving simple form');
+ console.log(this.simpleFormWithFormLevelErrors.get('firstName').errors);
+ this.formErrors.clear();
+ await new Promise((resolve, reject) => {
+ setTimeout(resolve, 1200);
+ });
+ if (new Date().getMilliseconds() > 500) {
+ this.formErrors.set(this.simpleFormWithFormLevelErrors.get('firstName'), 'Your first name is not cool enough');
+ }
+ this.formErrors.set(this.simpleFormWithFormLevelErrors.get('lastName'), 'Your last name makes no sense');
+ console.log(this.simpleFormWithFormLevelErrors.get('firstName').errors);
+ };
 
  blurry() {
  console.log('blurr');

projects/klippa/ngx-enhancy-forms/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@klippa/ngx-enhancy-forms",
- "version": "14.20.5",
+ "version": "14.21.0",
  "publishConfig": {
  "access": "public"
  },

projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html

@@ -68,6 +68,7 @@
  <div *ngIf="showDefaultError('MatchPassword')">{{getErrorMessage("matchPassword")}}</div>
  <div *ngIf="showDefaultError('date')">{{getErrorMessage("date")}}</div>
  <div *ngIf="showDefaultError('message')">{{attachedControl.errors.message.value}}</div>
+ <div *ngIf="showDefaultError('formLevel')">{{getErrorMessage("formLevel")}}</div>
  <div [ngTemplateOutlet]="getCustomErrorHandler(getErrorToShow())?.templateRef"></div>
  </div>
 </ng-template>

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

@@ -193,6 +193,9 @@ export class FormElementComponent implements AfterViewInit {
  }
 
  getErrorMessage(key: keyof FormErrorMessages): string {
+ if (key === 'formLevel') {
+ return this.attachedControl.errors?.formLevel;
+ }
  return this.customMessages?.[key]?.() ?? this.errorMessages[key];
  }
 

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

@@ -37,6 +37,7 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
  @Input() public errorMessageLocation: 'belowCaption' | 'rightOfCaption' = 'belowCaption';
  @Input() public formGroup: UntypedFormGroup;
  @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>;
  @Output() public onInjected = new EventEmitter<Record<string, any>>();
 
@@ -93,6 +94,9 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
  if (isValueSet(simpleChanges.warnings?.currentValue)) {
  this.patchFormWarningsMap();
  }
+ if (isValueSet(simpleChanges.errors?.currentValue)) {
+ this.patchFormErrorsMap();
+ }
  }
 
  ngOnDestroy(): void {
@@ -130,6 +134,29 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
  };
  }
 
+ private patchFormErrorsMap(): void {
+ const setFn = this.errors.set;
+ this.errors.set = (key: AbstractControl, value: string): Map<AbstractControl, string> => {
+ const prevVal = this.errors.get(key);
+ const result = setFn.call(this.errors, key, value);
+ key.setErrors({ ...key.errors, formLevel: value});
+ if (prevVal !== value) {
+ this.getFormElementByFormControl(key)?.determinePopupState();
+ }
+ return result;
+ };
+
+ const deleteFn = this.errors.delete;
+ this.errors.delete = (key: AbstractControl): boolean => {
+ const newErrorsObject = key.errors;
+ delete newErrorsObject.formLevel;
+ key.setErrors(newErrorsObject);
+ const result = deleteFn.call(this.errors, key);
+ this.getFormElementByFormControl(key)?.determinePopupState();
+ return result;
+ };
+ }
+
  private addSupportForPatchValueInterceptor(): void {
  const fn = this.formGroup.patchValue;
  const newFn = (

projects/klippa/ngx-enhancy-forms/src/lib/types.ts

@@ -10,6 +10,7 @@ export interface FormErrorMessages {
  pattern: string;
  matchPassword: string;
  date: string;
+ formLevel?: string;
 }
 
 export type CustomErrorMessages = Record<keyof FormErrorMessages, () => string>;