feat(showcase): add the ngx form error to the showcase

ISSUES CLOSED: #1195

showcase/package.json

@@ -119,6 +119,7 @@
     "@angular/platform-server": "~7.2.2",
     "@angular/router": "~7.2.2",
     "@nationalbankbelgium/code-style": "^1.1.1",
+    "@nationalbankbelgium/ngx-form-errors": "^1.0.0",
     "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-rc.4-242be0b7.tgz",
     "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-10.0.0-rc.4-242be0b7.tgz",
     "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-rc.4-242be0b7.tgz",

showcase/src/app/app-menu.config.ts

@@ -26,6 +26,13 @@ export const APP_MENU_CONFIG: StarkMenuConfig = {
 					isVisible: true,
 					isEnabled: true,
 					targetState: "news"
+				},
+				{
+					id: "reactive-form-errors",
+					label: "SHOWCASE.NGX_FORM_ERRORS.TITLE",
+					isVisible: true,
+					isEnabled: true,
+					targetState: "reactive-form-errors"
 				}
 			]
 		},

showcase/src/app/welcome/pages/index.ts

@@ -2,3 +2,4 @@ export * from "./getting-started";
 export * from "./home";
 export * from "./news";
 export * from "./no-content";
+export * from "./reactive-form-errors";

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.html

@@ -0,0 +1,3 @@
+<mat-card>
+	<ng-content></ng-content>
+</mat-card>

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.scss

@@ -0,0 +1,5 @@
+:host mat-card {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.ts

@@ -0,0 +1,45 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+type Colors =  "primary" | "accent" | "warning" | "success";
+
+@Component({
+	selector: "app-card",
+	templateUrl: "./card.component.html",
+	styleUrls: ["./card.component.scss"]
+})
+
+export class CardComponent {
+	@HostBinding("class.app-color-primary")
+	public primaryColor!: boolean;
+	@HostBinding("class.app-color-accent")
+	public accentColor!: boolean;
+	@HostBinding("class.app-color-warning")
+	public warningColor!: boolean;
+	@HostBinding("class.app-color-success")
+	public successColor!: boolean;
+
+	@Input()
+	public set color(color: Colors) {
+		this.primaryColor = false;
+		this.accentColor = false;
+		this.warningColor = false;
+		this.successColor = false;
+
+		switch (color) {
+			case "primary":
+				this.primaryColor = true;
+				break;
+			case "accent":
+				this.accentColor = true;
+				break;
+			case "warning":
+				this.warningColor = true;
+				break;
+			case "success":
+				this.successColor = true;
+				break;
+			default:
+				break;
+		}
+	}
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.theme.scss

@@ -0,0 +1,20 @@
+app-card.app-color-primary mat-card {
+  background-color: mat-color($primary-palette, 500);
+  color: mat-contrast($primary-palette, 500);
+}
+
+app-card.app-color-accent mat-card {
+  background-color: mat-color($primary-palette, 500);
+  color: mat-contrast($primary-palette, 500);
+}
+
+app-card.app-color-warning mat-card {
+  background-color: mat-color($warning-palette, 500);
+  color: mat-contrast($warning-palette, 500);
+}
+
+app-card.app-color-success mat-card {
+  /*Themes do not have a success map by default*/
+  background-color: mat-color($success-palette, 500);
+  color: mat-contrast($success-palette, 500);
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/index.ts

@@ -0,0 +1 @@
+export * from "./card.component";

showcase/src/app/welcome/pages/reactive-form-errors/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./card";
+export * from "./translated-form-error";

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/index.ts

@@ -0,0 +1 @@
+export * from "./translated-form-error.component";

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/translated-form-error.component.html

@@ -0,0 +1 @@
+<div *ngFor="let error of errors; trackBy: trackError">{{ error.message | translate: error.params }}</div>

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/translated-form-error.component.ts

@@ -0,0 +1,47 @@
+import { Component, HostBinding, OnInit } from "@angular/core";
+import { LangChangeEvent, TranslateService } from "@ngx-translate/core";
+import { Observable } from "rxjs";
+import { NgxFormErrorComponent, NgxFormFieldError } from "@nationalbankbelgium/ngx-form-errors";
+
+@Component({
+	selector: "app-translated-form-error",
+	templateUrl: "./translated-form-error.component.html"
+})
+export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnInit {
+	@HostBinding("class")
+	public cssClass = "translated-form-error";
+
+	public errors: NgxFormFieldError[] = [];
+	public errors$!: Observable<NgxFormFieldError[]>;
+	public fieldName!: string;
+
+	public constructor(public translateService: TranslateService) {}
+
+	public ngOnInit(): void {
+		this.translateService.onLangChange.subscribe((_ev: LangChangeEvent) => {
+			this.updateTranslateFieldName(this.translateService.instant(this.fieldName));
+		});
+	}
+
+	public subscribeToErrors(): void {
+		this.errors$.subscribe((errors: NgxFormFieldError[]) => {
+			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.updateTranslateFieldName(this.translateService.instant(this.fieldName));
+			}
+		});
+	}
+
+	public updateTranslateFieldName(translatedFieldName: string): void {
+		for (const error of this.errors) {
+			error.params = { ...error.params, fieldName: translatedFieldName };
+		}
+	}
+
+	public trackError(index: number): number {
+		return index;
+	}
+}

showcase/src/app/welcome/pages/reactive-form-errors/index.ts

@@ -0,0 +1 @@
+export * from "./reactive-form-errors-page.component";

showcase/src/app/welcome/pages/reactive-form-errors/parent-error-state-matcher.ts

@@ -0,0 +1,14 @@
+import { ErrorStateMatcher } from "@angular/material/core";
+import { FormControl, FormGroupDirective, NgForm } from "@angular/forms";
+
+/**
+ * Error when invalid control is dirty, touched, or submitted.
+ */
+export class ParentErrorStateMatcher implements ErrorStateMatcher {
+	public isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+		const isSubmitted: boolean = !!(form && form.submitted);
+		const formGroupValid: boolean = !!(form && form.valid);
+
+		return !!((control && control.invalid && (control.dirty || control.touched)) || isSubmitted || formGroupValid);
+	}
+}

showcase/src/app/welcome/pages/reactive-form-errors/password-validator.ts

@@ -0,0 +1,25 @@
+import { FormControl, FormGroup, ValidationErrors } from "@angular/forms";
+
+export class PasswordValidator {
+	// Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
+	public static areEqual(formGroup: FormGroup): ValidationErrors | null {
+		let value: string | undefined;
+		let valid = true;
+
+		for (const key in formGroup.controls) {
+			if (formGroup.controls.hasOwnProperty(key)) {
+				const control: FormControl = <FormControl>formGroup.controls[key];
+
+				if (value === undefined) {
+					value = control.value;
+				} else if (value !== control.value) {
+					valid = false;
+					break;
+				}
+			}
+		}
+
+		/* tslint:disable-next-line:no-null-keyword */
+		return valid ? null : { areEqual: true };
+	}
+}