feat(demo): improve demo part 3

ISSUES CLOSED: NationalBankBelgium#6

README.md

@@ -31,12 +31,8 @@ Let's just have a look at the following example:
 <input type="text" formControlName="foo" />
 
 <!-- You need to add an element for each and every error to display a different message -->
-<div *ngIf="form.get('foo').hasError('required') && form.get('foo').touched">
-	Field is required
-</div>
-<div *ngIf="form.get('foo').hasError('minlength') && form.get('foo').dirty">
-	Min length is 5
-</div>
+<div *ngIf="form.get('foo').hasError('required') && form.get('foo').touched"> Field is required </div>
+<div *ngIf="form.get('foo').hasError('minlength') && form.get('foo').dirty"> Min length is 5 </div>
 <div *ngIf="form.get('foo').hasError('pattern') && form.get('foo').dirty">
 	Field must contain at least one uppercase, one lowercase, and one number
 </div>
@@ -61,14 +57,10 @@ You decide how to display the messages by defining your own Error component:
 <!-- Error component's template -->
 
 <!-- you can simply display the message 'as is' -->
-<div *ngFor="let error of errors" class="awesome-error-message">
-	{{ error.message }}
-</div>
+<div *ngFor="let error of errors" class="awesome-error-message"> {{ error.message }} </div>
 
 <!-- or you can use the error's data/properties to do something fancy -->
-<div *ngFor="let error of errors" [class]="getErrorClass(error)">
-	{{ constructDisplayedErrorMMessage(error) }}
-</div>
+<div *ngFor="let error of errors" [ngClass]="getErrorClass(error)"> {{ constructDisplayedErrorMMessage(error) }} </div>
 ```
 
 And the messages are centralized in a service:

demo-app/src/app/app-routing.module.ts

@@ -1,13 +1,14 @@
+/*tslint:disable:completed-docs */
 import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
-//import {AppComponent} from "./app.component";
 import { ReactiveFormsExampleComponent } from "./pages/reactive-forms-example/reactive-forms-example.component";
 import { NgxFormsExampleComponent } from "./pages/ngx-forms-example/ngx-forms-example.component";
+import { TemplateDrivenFormsExampleComponent } from "./pages/template-driven-forms-example/template-driven-forms-example.component";
 
 const routes: Routes = [
-	//{  path: "", component: AppComponent},
-	{ path: "", redirectTo: "/reactive-forms", pathMatch: "full" },
+	{ path: "", redirectTo: "/template-driven-forms", pathMatch: "full" },
 	{ path: "reactive-forms", component: ReactiveFormsExampleComponent },
+	{ path: "template-driven-forms", component: TemplateDrivenFormsExampleComponent },
 	{ path: "ngx-form-errors", component: NgxFormsExampleComponent }
 ];
 

demo-app/src/app/app.component.html

@@ -1,10 +1,13 @@
 <!--<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">-->
 <h1 class="mat-h1">Ngx-Form-Errors</h1> <h2 class="mat-h2">Validation messages in Reactive Forms made easy</h2>
 
+<!--<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>-->
+
 <mat-sidenav-container class="example-container">
-	<mat-sidenav mode="side" opened>
+	<mat-sidenav #sidenav mode="side" opened>
 		<app-language-selector></app-language-selector>
 		<mat-list>
+			<mat-list-item><a routerLink="/template-driven-forms" routerLinkActive="active">Template Driven Forms</a></mat-list-item>
 			<mat-list-item><a routerLink="/reactive-forms" routerLinkActive="active">Reactive Forms</a></mat-list-item>
 			<mat-list-item><a routerLink="/ngx-form-errors" routerLinkActive="active">Ngx Form Errors</a></mat-list-item>
 		</mat-list>

demo-app/src/app/app.component.scss

@@ -1,3 +1,4 @@
+/*
 .form-group {
   display: flex;
   align-items: start;
@@ -49,3 +50,4 @@
   border: 1px #000 solid;
   border-radius: 6px;
 }
+*/

demo-app/src/app/app.component.ts

@@ -7,7 +7,11 @@ import { Component, OnInit } from "@angular/core";
 	styleUrls: ["./app.component.scss"]
 })
 export class AppComponent implements OnInit {
-	public constructor() {}
+	public constructor() {
+		/*empty*/
+	}
 
-	public ngOnInit(): void {}
+	public ngOnInit(): void {
+		/*empty*/
+	}
 }

demo-app/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { LanguageSelectorComponent, SimpleFormErrorComponent, TranslatedFormErro
 import { AppRoutingModule } from "./app-routing.module";
 import { ReactiveFormsExampleComponent } from "./pages/reactive-forms-example/reactive-forms-example.component";
 import { NgxFormsExampleComponent } from "./pages/ngx-forms-example/ngx-forms-example.component";
+import { TemplateDrivenFormsExampleComponent } from "./pages/template-driven-forms-example/template-driven-forms-example.component";
 
 /* tslint:disable:no-hardcoded-credentials */
 @NgModule({
@@ -26,7 +27,8 @@ import { NgxFormsExampleComponent } from "./pages/ngx-forms-example/ngx-forms-ex
 		SimpleFormErrorComponent,
 		TranslatedFormErrorComponent,
 		ReactiveFormsExampleComponent,
-		NgxFormsExampleComponent
+		NgxFormsExampleComponent,
+		TemplateDrivenFormsExampleComponent
 	],
 	imports: [
 		BrowserModule,

demo-app/src/app/components/translated-form-error/translated-form-error.component.html

@@ -1 +1 @@
-<div *ngFor="let error of errors" [class]="getErrorClass()"> {{ error.message | translate: error.params }} </div>
+<div *ngFor="let error of errors" [ngClass]="getErrorClass()"> {{ error.message | translate: error.params }} </div>

demo-app/src/app/components/translated-form-error/translated-form-error.component.ts

@@ -25,19 +25,18 @@ export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnIn
 
 	public checkForErrors(): void {
 		this.errors$.subscribe((errors: NgxFormFieldError[]) => {
-			// the formField can be retrieved from the "fieldName" param of any of the errors
+			this.errors = errors;
+
 			if (errors.length) {
+				// the formField can be retrieved from the "fieldName" param of any of the errors
 				this.fieldName = errors[0].params.fieldName;
+				this.translateFieldName();
 			}
-
-			this.errors = errors;
-			this.translateFieldName();
 		});
 	}
 
 	public translateFieldName(): void {
 		for (const error of this.errors) {
-			console.log("-------- translating error.params.fieldName", this.fieldName);
 			error.params = { ...error.params, fieldName: this.translateService.instant(this.fieldName) };
 		}
 	}

demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.html

@@ -31,43 +31,63 @@
 	<div class="form-buttons">
 		<button color="primary" mat-raised-button type="submit" [disabled]="!formNgxError.valid">Submit</button>
 		<button color="primary" mat-raised-button type="button" (click)="getFormStatus()">Get Form status</button>
+		<button color="primary" mat-stroked-button type="button" (click)="toggleValidationDetails()">
+			{{ showValidationDetails ? "Hide validation details" : "Show validation details" }}
+		</button>
+		<button color="primary" mat-stroked-button type="button" (click)="toggleValidationSummary()">
+			{{ showValidationSummary ? "Hide validation summary" : "Show validation summary" }}
+		</button>
 	</div>
 
-	<div class="form-validation-info">
+	<div class="form-validation-info" *ngIf="showValidationDetails">
 		<mat-card class="form-field-info">
 			<div>Has errors: {{ usernameField.hasErrors }}</div> <div>Has 'required' error: {{ usernameField.hasError("required") }}</div>
-			<div>Is valid?: {{ usernameField.isValid() }}</div>
-			<div>'required' error: {{ usernameField.getError("required") | json }}</div>
-			<div>Is touched? {{ usernameField.hasState("touched") }}</div>
-			<div *ngIf="usernameField.hasErrors">Errors: {{ usernameField.errors | json }}</div>
+			<div>Is valid?: {{ usernameField.isValid() }}</div> <div>Is touched? {{ usernameField.hasState("touched") }}</div>
+			<div>
+				'required' error: <pre>{{ usernameField.getError("required") | json }}</pre>
+			</div>
+			<div *ngIf="usernameField.hasErrors">
+				Errors: <pre>{{ usernameField.errors | json }}</pre>
+			</div>
 		</mat-card>
 		<mat-card class="form-field-info">
 			<div>Has errors: {{ passwordField.hasErrors }}</div> <div>Has 'pattern' error: {{ passwordField.hasError("pattern") }}</div>
-			<div>Is valid?: {{ passwordField.isValid() }}</div> <div>Is touched? {{ passwordField.hasState("touched") }}</div>
-			<div>'pattern' error: {{ passwordField.getError("pattern") | json }}</div>
-			<div *ngIf="passwordField.hasErrors">Errors: {{ passwordField.errors | json }}</div>
+			<div>Is pattern valid?: {{ passwordField.isValid("pattern") }}</div>
+			<div>Is touched? {{ passwordField.hasState("touched") }}</div>
+			<div>
+				'pattern' error: <pre>{{ passwordField.getError("pattern") | json }}</pre>
+			</div>
+			<div *ngIf="passwordField.hasErrors">
+				Errors: <pre>{{ passwordField.errors | json }}</pre>
+			</div>
 		</mat-card>
 		<mat-card class="form-field-info">
 			<div>Has errors: {{ confirmPasswordField.hasErrors }}</div>
-			<div>Has 'pattern' error: {{ confirmPasswordField.hasError("pattern") }}</div>
-			<div>Is valid?: {{ confirmPasswordField.isValid() }}</div>
+			<div>Has 'required' error: {{ confirmPasswordField.hasError("required") }}</div>
+			<div>Is required valid?: {{ confirmPasswordField.isValid("required") }}</div>
 			<div>Is touched? {{ confirmPasswordField.hasState("touched") }}</div>
-			<div>'pattern' error: {{ confirmPasswordField.getError("pattern") | json }}</div>
-			<div *ngIf="confirmPasswordField.hasErrors">Errors: {{ confirmPasswordField.errors | json }}</div>
+			<div>
+				'required' error: <pre>{{ confirmPasswordField.getError("required") | json }}</pre>
+			</div>
+			<div *ngIf="confirmPasswordField.hasErrors">
+				Errors: <pre>{{ confirmPasswordField.errors | json }}</pre>
+			</div>
 		</mat-card>
 	</div>
 
-	<!-- <div class="form-validation-messages" *ngIf="usernameField.hasErrors || passwordField.hasErrors || confirmPasswordField.hasErrors">
-			<ul>
-				<li *ngIf="usernameField.hasErrors">
-					<ng-template ngxFormErrors="username" ngxFormErrorsFieldName="blabla"></ng-template>
-				</li>
-				<li *ngIf="passwordField.hasErrors">
-					<ng-template ngxFormErrors="matchingPasswords.password"></ng-template>
-				</li>
-				<li *ngIf="confirmPasswordField.hasErrors">
-					<ng-template *ngxFormErrors="'matchingPasswords.confirmPassword'"></ng-template>
-				</li>
-			</ul>
-		</div> -->
+	<mat-card
+		class="form-validation-messages"
+		[ngClass]="{ 'no-errors': !usernameField.hasErrors && !passwordField.hasErrors && !confirmPasswordField.hasErrors }"
+		*ngIf="showValidationSummary"
+	>
+		<span *ngIf="!usernameField.hasErrors && !passwordField.hasErrors && !confirmPasswordField.hasErrors">No validation errors</span>
+		<!-- TODO: IMPORTANT: the ngIf cannot be used here because it causes some issues with the ErrorComponent created by the ngxFormErrors -->
+		<div [hidden]="!usernameField.hasErrors && !passwordField.hasErrors && !confirmPasswordField.hasErrors">
+			<span [hidden]="!usernameField.hasErrors"><ng-template ngxFormErrors="username"></ng-template></span>
+			<span [hidden]="!passwordField.hasErrors"><ng-template ngxFormErrors="matchingPasswords.password"></ng-template></span>
+			<span [hidden]="!confirmPasswordField.hasErrors"
+				><ng-template ngxFormErrors="matchingPasswords.confirmPassword"></ng-template
+			></span>
+		</div>
+	</mat-card>
 </form>

demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.scss

@@ -1,6 +1,6 @@
 .form-group {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   flex-direction: column;
   flex-wrap: wrap;
 
@@ -18,12 +18,13 @@
   .form-buttons {
     margin-top: 25px;
 
-    button:first-child {
-      margin-right: 20px;
-    }
     button {
+      margin-left: 20px;
       min-width: 150px;
     }
+    button:first-child {
+      margin-left: 0;
+    }
   }
 }
 
@@ -33,19 +34,19 @@
   flex-wrap: wrap;
   justify-content: flex-start;
 
-  /*& .form-field-info {
-      background-color: aliceblue;
-      border: 1px #000 solid;
-      border-radius: 6px;
-      width: 350px;
-      margin: 20px;
-      margin-right: 20px;
-    }*/
+  & .form-field-info {
+    background-color: #94c6ff;
+    width: 350px;
+    margin: 20px;
+    margin-right: 20px;
+  }
 }
 
 .form-validation-messages {
   margin: 20px;
-  background-color: cornsilk;
-  border: 1px #000 solid;
-  border-radius: 6px;
+  background-color: #ffb006;
+
+  &.no-errors {
+    background-color: #3fbf35;
+  }
 }