add support for warning templates

klippa-app · Jun 10, 2024 · fa3b71f · fa3b71f
1 parent ec918ca
commit fa3b71f
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 12 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -187,3 +187,7 @@
 some cool stuff here <br />
 some cool stuff here <br />
 some cool stuff here <br />
+
+<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>
diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {AbstractControl, FormBuilder, UntypedFormArray, UntypedFormGroup, Validators} from '@angular/forms';
 import {AppSelectOptions, SelectComponent} from '@klippa/ngx-enhancy-forms';
 
@@ -8,11 +8,13 @@ import {AppSelectOptions, SelectComponent} from '@klippa/ngx-enhancy-forms';
 	styleUrls: ['./demo.component.scss']
 })
 export class DemoComponent {
-	public formWarnings = new Map<AbstractControl, string>();
+	@ViewChild('myFancyTemplate') myFancyTemplate: TemplateRef<any>;
+	public formWarnings = new Map<AbstractControl, string | TemplateRef<any>>();
 	constructor(private fb: FormBuilder) {
 
 		setTimeout(() => {
-		this.formWarnings.set(this.myForm.get('name'), 'This is a warning about your name');
+		// this.formWarnings.set(this.myForm.get('name'), 'This is a warning about your name');
+		this.formWarnings.set(this.myForm.get('name'), this.myFancyTemplate);
 			// this.formWarnings.delete(this.myForm.get('name'));
 		}, 1500);
 

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.19.4",
+  "version": "14.20.0",
   "publishConfig": {
     "access": "public"
   },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.html
@@ -85,7 +85,10 @@
 					<div class="errorTooltipInner">
 						<i class="closeBtn" (click)="closePopup();">×</i>
 						<ng-container *ngIf="getErrorToShow()" [ngTemplateOutlet]="errorRef"></ng-container>
-						<div *ngIf="!getErrorToShow() && shouldShowWarningPopup()">{{getWarningToShow()}}</div>
+						<div *ngIf="!getErrorToShow() && shouldShowWarningPopup()">
+							<ng-container *ngIf="getWarningToShowIsTemplateRef()" [ngTemplateOutlet]="getWarningToShowAsTemplateRef()"></ng-container>
+							<span *ngIf="!getWarningToShowIsTemplateRef()">{{getWarningToShow()}}</span>
+						</div>
 					</div>
 				</div>
 			</div>

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts
@@ -106,7 +106,7 @@ export class FormElementComponent implements AfterViewInit {
 			this.popupState = 'onHover';
 			return;
 		}
-		if (stringIsSetAndFilled(this.getWarningToShow())) {
+		if (isValueSet(this.getWarningToShow())) {
 			this.popupState = 'lockedOpen';
 			return;
 		}
@@ -134,10 +134,21 @@ export class FormElementComponent implements AfterViewInit {
 		this.captionRef = templateRef;
 	}
 
-	getWarningToShow(): string {
+	public getWarningToShow(): string | TemplateRef<any> {
 		return this.parent?.getWarningToShow(this.attachedControl);
 	}
 
+	public getWarningToShowAsTemplateRef(): TemplateRef<any> {
+		if (this.parent?.getWarningToShow(this.attachedControl) instanceof TemplateRef) {
+			return this.parent?.getWarningToShow(this.attachedControl) as TemplateRef<any>;
+		}
+		throw new Error('Warning is not a TemplateRef');
+	}
+
+	public getWarningToShowIsTemplateRef(): boolean {
+		return this.getWarningToShow() instanceof TemplateRef;
+	}
+
 	getErrorToShow(): string {
 		const firstError = Object.keys(this.attachedControl?.errors ?? {})[0];
 		if (this.attachedControl?.touched !== true) {
@@ -203,7 +214,7 @@ export class FormElementComponent implements AfterViewInit {
 		if (stringIsSetAndFilled(this.getErrorToShow())) {
 			return !this.errorFullyVisible;
 		}
-		if (stringIsSetAndFilled(this.getWarningToShow())) {
+		if (isValueSet(this.getWarningToShow())) {
 			return true;
 		}
 		return false;
@@ -224,7 +235,7 @@ export class FormElementComponent implements AfterViewInit {
 	}
 
 	public shouldShowWarningPopup(): boolean {
-		return stringIsSetAndFilled(this.getWarningToShow());
+		return isValueSet(this.getWarningToShow());
 	}
 
 	public closePopup(): void {

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
@@ -8,7 +8,7 @@ import {
 	Optional,
 	Output,
 	SimpleChanges,
-	SkipSelf
+	SkipSelf, TemplateRef
 } from '@angular/core';
 import {AbstractControl, FormArray, FormControl, FormGroup, UntypedFormArray, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
 import {FormElementComponent} from './form-element/form-element.component';
@@ -36,7 +36,7 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 	@Input() public showErrorMessages = true;
 	@Input() public errorMessageLocation: 'belowCaption' | 'rightOfCaption' = 'belowCaption';
 	@Input() public formGroup: UntypedFormGroup;
-	@Input() public warnings: Map<AbstractControl, string> = new Map<AbstractControl, string>();
+	@Input() public warnings: Map<AbstractControl, string | TemplateRef<any>> = new Map<AbstractControl, string | TemplateRef<any>>();
 	@Input() public patchValueInterceptor: (values: any) => Promise<any>;
 	@Output() public onInjected = new EventEmitter<Record<string, any>>();
 
@@ -217,7 +217,7 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 		return this.activeControls.find((e) => e.formControl === control)?.formElement;
 	}
 
-	public getWarningToShow(control: AbstractControl): string {
+	public getWarningToShow(control: AbstractControl): string | TemplateRef<any> {
 		return this.warnings.get(control);
 	}