diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html index bad63f2..a17bb12 100644 --- 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
some cool stuff here
some cool stuff here
+ + + This can be ANYTHING. Look at me me, i am BOLD AND GREEN + diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts index b48785d..8854491 100644 --- 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(); + @ViewChild('myFancyTemplate') myFancyTemplate: TemplateRef; + public formWarnings = new Map>(); 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 index 152f84d..8b180ec 100644 --- 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 index 95f2c23..1405771 100644 --- 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 @@
× -
{{getWarningToShow()}}
+
+ + {{getWarningToShow()}} +
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 index f0c9371..17ff7a5 100644 --- 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 { return this.parent?.getWarningToShow(this.attachedControl); } + public getWarningToShowAsTemplateRef(): TemplateRef { + if (this.parent?.getWarningToShow(this.attachedControl) instanceof TemplateRef) { + return this.parent?.getWarningToShow(this.attachedControl) as TemplateRef; + } + 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 index 297ae8f..f1f900f 100644 --- 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 = new Map(); + @Input() public warnings: Map> = new Map>(); @Input() public patchValueInterceptor: (values: any) => Promise; @Output() public onInjected = new EventEmitter>(); @@ -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 { return this.warnings.get(control); }