fix(cb2-10211): fix inline error messages not showing immediately on …

…submit (#1333) * fix(cb2-10211): fix duplicate error messages + global error service not focusing elements * fix(cb2-10211): fix inline error messages not showing immediately on submit
dvsa · Dec 15, 2023 · 4f66218 · 4f66218
1 parent 5e8a201
commit 4f66218
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/src/app/forms/components/radio-group/radio-group.component.html b/src/app/forms/components/radio-group/radio-group.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'govuk-form-group': !noBottomMargin }">
+<div [ngClass]="{ 'govuk-form-group': !noBottomMargin }" [id]="control?.meta?.name">
   <fieldset class="govuk-fieldset" [disabled]="disabled">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
       <h1 class="govuk-fieldset__heading">
@@ -23,6 +23,7 @@ <h1 class="govuk-fieldset__heading">
           [value]="option.value"
           [(ngModel)]="value"
           (ngModelChange)="onChange($event)"
+          (blur)="control?.markAsTouched()"
         />
 
         <label class="govuk-label govuk-radios__label" [for]="name + '-' + option.value + '-radio'"> {{ option.label }} </label>

diff --git a/src/app/forms/custom-sections/adr-guidance-notes/adr-guidance-notes.component.html b/src/app/forms/custom-sections/adr-guidance-notes/adr-guidance-notes.component.html
@@ -3,7 +3,7 @@
     {{ control.meta.label }}
   </label>
 
-  <app-field-error-message [error]="error ? control.meta.customValidatorErrorName : error"></app-field-error-message>
+  <app-field-error-message [error]="error"></app-field-error-message>
 
   <app-select
     [name]="name"

diff --git a/src/app/forms/custom-sections/adr/adr.component.ts b/src/app/forms/custom-sections/adr/adr.component.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   Input,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-vehicle-type';
@@ -10,16 +11,18 @@ import { CustomFormGroup } from '@forms/services/dynamic-form.types';
 import { AdrTemplate } from '@forms/templates/general/adr.template';
 import { TechnicalRecordService } from '@services/technical-record/technical-record.service';
 
+import { GlobalErrorService } from '@core/components/global-error/global-error.service';
 import { ADRTankDetailsTankStatementSelect } from '@dvsa/cvs-type-definitions/types/v3/tech-record/enums/adrTankDetailsTankStatementSelect.enum.js';
-import { DateValidators } from '@forms/validators/date/date.validators';
 import { AdrSummaryTemplate } from '@forms/templates/general/adr-summary.template';
+import { DateValidators } from '@forms/validators/date/date.validators';
+import { ReplaySubject, skipWhile, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-adr',
   templateUrl: './adr.component.html',
   styleUrls: ['./adr.component.scss'],
 })
-export class AdrComponent implements OnInit {
+export class AdrComponent implements OnInit, OnDestroy {
   @Input() techRecord!: TechRecordType<'hgv'> | TechRecordType<'trl'> | TechRecordType<'lgv'>;
   @Input() isEditing = false;
   @Input() disableLoadOptions = false;
@@ -58,9 +61,12 @@ export class AdrComponent implements OnInit {
     'techRecord_adrDetails_declarationsSeen',
   ];
 
+  destroy$ = new ReplaySubject<boolean>(1);
+
   constructor(
     private dfs: DynamicFormService,
     private technicalRecordService: TechnicalRecordService,
+    private globalErrorService: GlobalErrorService,
   ) { }
 
   ngOnInit(): void {
@@ -70,6 +76,12 @@ export class AdrComponent implements OnInit {
     this.form = this.dfs.createForm(this.template, this.techRecord) as CustomFormGroup;
     this.checkForAdrFields();
     this.checkForTankStatement();
+    this.handleSubmit();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
   }
 
   checkForAdrFields() {
@@ -129,4 +141,26 @@ export class AdrComponent implements OnInit {
     this.form.patchValue(event);
     this.technicalRecordService.updateEditingTechRecord({ ...this.techRecord, ...event } as TechRecordTypeVerb<'put'>);
   }
+
+  handleSubmit() {
+    this.globalErrorService.errors$.pipe(takeUntil(this.destroy$), skipWhile((errors) => errors.length === 0)).subscribe(() => {
+      document.querySelectorAll(`
+          a[href]:not([tabindex='-1']),
+          area[href]:not([tabindex='-1']),
+          input:not([disabled]):not([tabindex='-1']),
+          select:not([disabled]):not([tabindex='-1']),
+          textarea:not([disabled]):not([tabindex='-1']),
+          button:not([disabled]):not([tabindex='-1']),
+          iframe:not([tabindex='-1']),
+          [tabindex]:not([tabindex='-1']),
+          [contentEditable=true]:not([tabindex='-1'])
+      `)
+        .forEach((element) => {
+          if (element instanceof HTMLElement) {
+            element.focus();
+            element.blur();
+          }
+        });
+    });
+  }
 }