fix(demo): issue when opening ngx-form-error page in demo apps

When opening ngx-form-error page this raise an jasvscript error. ISSUES CLOSED: NationalBankBelgium#43
mhenkens · Oct 12, 2023 · 9c5e166 · 9c5e166
1 parent 0e9cca2
commit 9c5e166
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 14 deletions.
diff --git a/demo-app/ng7/src/app/pages/ngx-forms-example/ngx-forms-example.component.html b/demo-app/ng7/src/app/pages/ngx-forms-example/ngx-forms-example.component.html
@@ -23,7 +23,7 @@ <h1 class="mat-display-1">Reactive Forms with NgxFormErrors</h1>
 							/>
 							<mat-error>
 								<ng-template
-									ngxFormErrors="matchingPasswords.password"
+									ngxFormErrors="password"
 									ngxFormErrorsFieldName="DEMO.FIELDS.PASSWORD_ALIAS"
 									#passwordField="ngxFormErrors"
 								></ng-template>
@@ -40,10 +40,7 @@ <h1 class="mat-display-1">Reactive Forms with NgxFormErrors</h1>
 								required
 							/>
 							<mat-error>
-								<ng-template
-									ngxFormErrors="matchingPasswords.confirmPassword"
-									#confirmPasswordField="ngxFormErrors"
-								></ng-template>
+								<ng-template ngxFormErrors="confirmPassword" #confirmPasswordField="ngxFormErrors"></ng-template>
 							</mat-error>
 						</mat-form-field>
 					</div>

diff --git a/demo-app/ng7/src/app/parent-error-state-matcher.ts b/demo-app/ng7/src/app/parent-error-state-matcher.ts
@@ -5,8 +5,8 @@ import { FormControl, FormGroupDirective, NgForm } from "@angular/forms";
 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);
+		const formGroupInvalid: boolean = !!(form && form.invalid);
 
-		return !!((control && control.invalid && (control.dirty || control.touched)) || isSubmitted || formGroupValid);
+		return !!(control && (control.invalid || formGroupInvalid) && (control.dirty || control.touched || isSubmitted));
 	}
 }
diff --git a/demo-app/ng8/src/app/pages/ngx-forms-example/ngx-forms-example.component.html b/demo-app/ng8/src/app/pages/ngx-forms-example/ngx-forms-example.component.html
@@ -23,7 +23,7 @@ <h1 class="mat-display-1">Reactive Forms with NgxFormErrors</h1>
 							/>
 							<mat-error>
 								<ng-template
-									ngxFormErrors="matchingPasswords.password"
+									ngxFormErrors="password"
 									ngxFormErrorsFieldName="DEMO.FIELDS.PASSWORD_ALIAS"
 									#passwordField="ngxFormErrors"
 								></ng-template>
@@ -40,10 +40,7 @@ <h1 class="mat-display-1">Reactive Forms with NgxFormErrors</h1>
 								required
 							/>
 							<mat-error>
-								<ng-template
-									ngxFormErrors="matchingPasswords.confirmPassword"
-									#confirmPasswordField="ngxFormErrors"
-								></ng-template>
+								<ng-template ngxFormErrors="confirmPassword" #confirmPasswordField="ngxFormErrors"></ng-template>
 							</mat-error>
 						</mat-form-field>
 					</div>

diff --git a/demo-app/ng8/src/app/parent-error-state-matcher.ts b/demo-app/ng8/src/app/parent-error-state-matcher.ts
@@ -5,8 +5,8 @@ import { FormControl, FormGroupDirective, NgForm } from "@angular/forms";
 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);
+		const formGroupInvalid: boolean = !!(form && form.invalid);
 
-		return !!((control && control.invalid && (control.dirty || control.touched)) || isSubmitted || formGroupValid);
+		return !!(control && (control.invalid || formGroupInvalid) && (control.dirty || control.touched || isSubmitted));
 	}
 }