update test for demo

NationalBankBelgium · Nov 23, 2023 · 701d795 · 701d795
1 parent 846f1e0
commit 701d795
Showing 5 changed files with 238 additions and 243 deletions.
diff --git a/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html b/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
@@ -7,12 +7,12 @@
 				<mat-card-content>
 					<mat-form-field class="username">
 						<input matInput [placeholder]="'DEMO.PLACEHOLDERS.USER_NAME' | translate" formControlName="username" required />
-						<mat-error *ngFor="let validation of validationMessages.username">
+						<mat-error *ngFor="let validation of validationMessages['username']">
 							<div
 								class="error-message"
 								*ngIf="
-									formGroup.get('username').hasError(validation.type) &&
-									(formGroup.get('username').dirty || formGroup.get('username').touched)
+									formGroup.get('username')!.hasError(validation.type) &&
+									(formGroup.get('username')!.dirty || formGroup.get('username')!.touched)
 								"
 							>
 								{{ validation.message | translate }}
@@ -29,16 +29,14 @@
 								formControlName="password"
 								required
 							/>
-							<mat-error *ngFor="let validation of validationMessages.password">
+							<mat-error *ngFor="let validation of validationMessages['password']">
 								<div
 									class="error-message"
 									*ngIf="
 										formGroup
-											.get('matchingPasswords')
-											.get('password')
-											.hasError(validation.type) &&
-										(formGroup.get('matchingPasswords').get('password').dirty ||
-											formGroup.get('matchingPasswords').get('password').touched)
+											.get('matchingPasswords.password')!.hasError(validation.type) &&
+										(formGroup.get('matchingPasswords.password')!.dirty ||
+											formGroup.get('matchingPasswords.password')!.touched)
 									"
 								>
 									{{ validation.message | translate }}
@@ -55,17 +53,15 @@
 								[errorStateMatcher]="parentErrorStateMatcher"
 								required
 							/>
-							<mat-error *ngFor="let validation of validationMessages.confirmPassword">
+							<mat-error *ngFor="let validation of validationMessages['confirmPassword']">
 								<div
 									class="error-message"
 									*ngIf="
 										(formGroup
-											.get('matchingPasswords')
-											.get('confirmPassword')
-											.hasError(validation.type) ||
-											formGroup.get('matchingPasswords').hasError(validation.type)) &&
-										(formGroup.get('matchingPasswords').get('confirmPassword').dirty ||
-											formGroup.get('matchingPasswords').get('confirmPassword').touched)
+											.get('matchingPasswords.confirmPassword')!.hasError(validation.type) ||
+											formGroup.get('matchingPasswords')!.hasError(validation.type)) &&
+										(formGroup.get('matchingPasswords.confirmPassword')!.dirty ||
+											formGroup.get('matchingPasswords.confirmPassword')!.touched)
 									"
 								>
 									{{ validation.message | translate }}
@@ -91,50 +87,50 @@
 				<app-card class="form-field-info" color="accent">
 					<mat-card-title>Username</mat-card-title>
 					<mat-card-content>
-						<div>Has errors: {{ !!formGroup.get("username").errors }}</div>
-						<div>Has 'required' error: {{ formGroup.get("username").hasError("required") }}</div>
+						<div>Has errors: {{ !!formGroup.get("username")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}</div>
 						<div>
 							'required' error:
-							<pre>{{ formGroup.get("username").getError("required") | json }}</pre>
+							<pre>{{ formGroup.get("username")!.getError("required") | json }}</pre>
 						</div>
-						<div>Is touched? {{ formGroup.get("username").touched }}</div>
-						<div *ngIf="formGroup.get('username').errors">
+						<div>Is touched? {{ formGroup.get("username")!.touched }}</div>
+						<div *ngIf="formGroup.get('username')!.errors">
 							Errors:
-							<pre>{{ formGroup.get("username").errors | json }}</pre>
+							<pre>{{ formGroup.get("username")!.errors | json }}</pre>
 						</div>
 					</mat-card-content>
 				</app-card>
 
 				<app-card class="form-field-info" color="accent">
 					<mat-card-title>Password</mat-card-title>
 					<mat-card-content>
-						<div>Has errors: {{ !!formGroup.get("matchingPasswords.password").errors }}</div>
-						<div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password").hasError("pattern") }}</div>
-						<div>Is touched? {{ formGroup.get("matchingPasswords.password").touched }}</div>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}</div>
+						<div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}</div>
 						<div>
 							'pattern' error:
-							<pre>{{ formGroup.get("matchingPasswords.password").getError("pattern") | json }}</pre>
+							<pre>{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}</pre>
 						</div>
-						<div *ngIf="formGroup.get('matchingPasswords.password').errors">
+						<div *ngIf="formGroup.get('matchingPasswords.password')!.errors">
 							Errors:
-							<pre>{{ formGroup.get("matchingPasswords.password").errors | json }}</pre>
+							<pre>{{ formGroup.get("matchingPasswords.password")!.errors | json }}</pre>
 						</div>
 					</mat-card-content>
 				</app-card>
 
 				<app-card class="form-field-info" color="accent">
 					<mat-card-title>Confirm password</mat-card-title>
 					<mat-card-content>
-						<div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword").errors }}</div>
-						<div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword").hasError("required") }}</div>
-						<div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword").touched }}</div>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}</div>
 						<div>
 							'required' error:
-							<pre>{{ formGroup.get("matchingPasswords.confirmPassword").getError("required") | json }}</pre>
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}</pre>
 						</div>
-						<div *ngIf="formGroup.get('matchingPasswords.confirmPassword').errors">
+						<div *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
 							Errors:
-							<pre>{{ formGroup.get("matchingPasswords.confirmPassword").errors | json }}</pre>
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}</pre>
 						</div>
 					</mat-card-content>
 				</app-card>
@@ -144,54 +140,54 @@
 				*ngIf="showValidationSummary"
 				class="form-validation-messages"
 				[color]="
-					!formGroup.get('username').errors &&
-					!formGroup.get('matchingPasswords.password').errors &&
-					!formGroup.get('matchingPasswords.confirmPassword').errors
+					!formGroup.get('username')!.errors &&
+					!formGroup.get('matchingPasswords.password')!.errors &&
+					!formGroup.get('matchingPasswords.confirmPassword')!.errors
 						? 'success'
 						: 'warning'
 				"
 			>
 				<p
 					*ngIf="
-						!formGroup.get('username').errors &&
-						!formGroup.get('matchingPasswords.password').errors &&
-						!formGroup.get('matchingPasswords.confirmPassword').errors
+						!formGroup.get('username')!.errors &&
+						!formGroup.get('matchingPasswords.password')!.errors &&
+						!formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
 				>
 					No validation errors
 				</p>
 				<ul
 					*ngIf="
-						formGroup.get('username').errors ||
-						formGroup.get('matchingPasswords.password').errors ||
-						formGroup.get('matchingPasswords.confirmPassword').errors
+						formGroup.get('username')!.errors ||
+						formGroup.get('matchingPasswords.password')!.errors ||
+						formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
 				>
-					<ng-container *ngIf="formGroup.get('username').errors">
-						<ng-container *ngFor="let validation of validationMessages.username">
-							<li *ngIf="formGroup.get('username').errors && formGroup.get('username').errors[validation.type]">
+					<ng-container *ngIf="formGroup.get('username')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['username']">
+							<li *ngIf="formGroup.get('username')!.errors && formGroup.get('username')!.errors![validation.type]">
 								{{ validation.message | translate }}
 							</li>
 						</ng-container>
 					</ng-container>
-					<ng-container *ngIf="formGroup.get('matchingPasswords.password').errors">
-						<ng-container *ngFor="let validation of validationMessages.password">
+					<ng-container *ngIf="formGroup.get('matchingPasswords.password')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['password']">
 							<li
 								*ngIf="
-									formGroup.get('matchingPasswords.password').errors &&
-									formGroup.get('matchingPasswords.password').errors[validation.type]
+									formGroup.get('matchingPasswords.password')!.errors &&
+									formGroup.get('matchingPasswords.password')!.errors![validation.type]
 								"
 							>
 								{{ validation.message | translate }}
 							</li>
 						</ng-container>
 					</ng-container>
-					<ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword').errors">
-						<ng-container *ngFor="let validation of validationMessages.confirmPassword">
+					<ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['confirmPassword']">
 							<li
 								*ngIf="
-									formGroup.get('matchingPasswords.confirmPassword').errors &&
-									formGroup.get('matchingPasswords.confirmPassword').errors[validation.type]
+									formGroup.get('matchingPasswords.confirmPassword')!.errors &&
+									formGroup.get('matchingPasswords.confirmPassword')!.errors![validation.type]
 								"
 							>
 								{{ validation.message | translate }}

diff --git a/.../src/app/pages/template-driven-forms-example/template-driven-forms-example.component.html b/.../src/app/pages/template-driven-forms-example/template-driven-forms-example.component.html
@@ -14,7 +14,7 @@
 							#usernameField="ngModel"
 							required
 						/>
-						<mat-error *ngFor="let validation of validationMessages.username">
+						<mat-error *ngFor="let validation of validationMessages['username']">
 							<div
 								class="error-message"
 								*ngIf="
@@ -40,7 +40,7 @@
 								minlength="3"
 								maxlength="10"
 							/>
-							<mat-error *ngFor="let validation of validationMessages.password">
+							<mat-error *ngFor="let validation of validationMessages['password']">
 								<div
 									class="error-message"
 									*ngIf="
@@ -65,7 +65,7 @@
 								[errorStateMatcher]="parentErrorStateMatcher"
 								required
 							/>
-							<mat-error *ngFor="let validation of validationMessages.confirmPassword">
+							<mat-error *ngFor="let validation of validationMessages['confirmPassword']">
 								<div
 									class="error-message"
 									*ngIf="
@@ -153,15 +153,15 @@
 			>
 				<p *ngIf="!usernameField.errors && !passwordField.errors && !confirmPasswordField.errors">No validation errors</p>
 				<ul *ngIf="usernameField.errors || passwordField.errors || confirmPasswordField.errors">
-					<ng-container *ngFor="let validation of validationMessages.username">
+					<ng-container *ngFor="let validation of validationMessages['username']">
 						<li *ngIf="usernameField.errors && usernameField.errors[validation.type]">{{ validation.message | translate }}</li>
 					</ng-container>
 
-					<ng-container *ngFor="let validation of validationMessages.password">
+					<ng-container *ngFor="let validation of validationMessages['password']">
 						<li *ngIf="passwordField.errors && passwordField.errors[validation.type]">{{ validation.message | translate }}</li>
 					</ng-container>
 
-					<ng-container *ngFor="let validation of validationMessages.confirmPassword">
+					<ng-container *ngFor="let validation of validationMessages['confirmPassword']">
 						<li *ngIf="confirmPasswordField.errors && confirmPasswordField.errors[validation.type]">
 							{{ validation.message | translate }}
 						</li>

diff --git a/demo-app/ng12/tsconfig.json b/demo-app/ng12/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@nationalbankbelgium/code-style/tsconfig/3.5.x/ng8",
+  "extends": "@nationalbankbelgium/code-style/tsconfig/4.3.x/ng12",
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",