Tooltips on validation failure

src/app/app.component.html

@@ -26,3 +26,25 @@
 		</div>
 	</div>
 </div>
+
+
+
+
+
+<ng-template #testTemplate_NOTWORKING let-control="control" let-meta="meta">
+
+	<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
+		<label class="col-sm-4" [for]="meta.name" style="color: purple'">{{ meta.label }}</label>
+		<div class="col-sm-8">
+			<ng-container dynafield [control]="control" [meta]="meta" (call)="handle($event)"></ng-container>
+		</div>
+	</div>
+	
+	<ng-template #recursiveDynaform>
+		<div class="row pt-3">
+			<h3 class="col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+		</div>
+		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handle($event)"></app-dynaform>
+	</ng-template>
+
+</ng-template>

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnChanges, ViewChild, TemplateRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { DynaformService } from './dynaform/services/dynaform.service';
+import { DynaformService } from './dynaform';
 
 import * as test1 from './_mock/testfields.v1';
 import * as test2 from './_mock/testfields.v2';

src/app/dynaform/dynaform.component.html

@@ -7,10 +7,15 @@
      used when a TemplateRef is NOT supplied to component -->
 <ng-template #default let-control="control" let-meta="meta">
 	
-	<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
-		<label class="col-sm-4" [for]="meta.name">{{ meta.label }}</label>
+	<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta.type)">
+		<label class="col-sm-4" [for]="meta.name">
+			{{ meta.label }}
+			<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
+				[ngbTooltip]="getValidationFailureMessage(control, meta)"
+			></span>
+		</label>
 		<div class="col-sm-8">
-			<ng-container dynafield [control]="control" [meta]="meta" (call)="handle($event)"></ng-container>
+			<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 		</div>
 	</div>
 	
@@ -18,7 +23,7 @@
 		<div class="row pt-3">
 			<h3 class="col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 		</div>
-		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handle($event)"></app-dynaform>
+		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 	</ng-template>
 
 </ng-template>

src/app/dynaform/dynaform.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, TemplateRef, Optional, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { FormGroup, FormGroupName, AbstractControl, ControlContainer } from '@angular/forms';
+import { FormControl, FormGroup, FormGroupName, AbstractControl, ControlContainer } from '@angular/forms';
 import { SuperForm } from 'angular-super-validator';
 
 export interface DynarowContext {
@@ -122,8 +122,17 @@ export class DynaformComponent implements OnInit {
 		};
 	}
 
-	getRowClass(inputType: string): string {
-		return `row-${inputType.toLowerCase().replace('component', '')}`;
+	getRowClass(control: FormControl, inputType: string): string {
+		const errorClass = control && control.touched && control.invalid ? ' dyna-error' : '';
+		return `row-${inputType.toLowerCase().replace('component', '')}${errorClass}`;
+	}
+
+	getValidationFailureMessage(control: FormControl, meta: StringMap) {
+		if (control.errors) {
+			const errKeys = Object.keys(control.errors);
+			console.log(errKeys);
+			return meta.valFailureMessages[errKeys[0]];
+		}
 	}
 
 	getValidationErrors() {
@@ -134,7 +143,7 @@ export class DynaformComponent implements OnInit {
 		return 'No Errors';
 	}
 
-	handle(fnId: string) {
+	handleCallback(fnId: string) {
 		this.call.emit(fnId);
 	}
 

src/app/dynaform/dynaform.module.ts

@@ -36,6 +36,7 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 		FormsModule,
 		ReactiveFormsModule,
 		DynaformComponent,
+		DynafieldDirective,
 		ffcArr
 	]
 })

src/app/dynaform/index.ts

@@ -1,4 +1,5 @@
 export { DynaformComponent } from './dynaform.component';
+// export { DynafieldDirective } from './directives/dynafield.directive';
 export { DynaformService } from './services/dynaform.service';
 export { ModelMapperService } from './services/model-mapper.service';
 export { standardModifiers, standardTransformer, arrayToMeta } from './utils';

src/styles.scss

@@ -94,3 +94,14 @@ div.col-sm-8 {
 	margin-right: 4px;
 }
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Errors
+
+.dyna-error label.col-sm-4 {
+	span {
+		display: inline-block;
+		margin-left: 0.5em;
+		color: red;
+	}
+}
+