-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SFD-128: Add error summary for validation errors (#118)
* Add error summary component * Move validation error messages to variable and add getter for errors * Show error summary on submission of invalid form * Enable submit button when form invalid If the form is invalid the error summary will be shown. * Focus error summary on invalid submission * Do not update error summary until resubmission * Style error summary * Remove full stops from error messages * Refactor error config * Add dark mode styles * Remove extra monthly active users inline error message * Remove explicit typing from errorConfig * Add unit test * Refactor handleSubmit * Delete empty css file * Add class to center error text in error flex boxes * Move type and constants to constants.ts
- Loading branch information
1 parent
a7a53ab
commit f2cfaa3
Showing
9 changed files
with
182 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div #errorSummary tabindex="-1" class="tce-error-summary tce-border-4 tce-rounded tce-p-3 tce-mt-2 tce-mb-5"> | ||
| <h2 class="tce-text-2xl"><strong>There is a problem</strong></h2> | ||
| <div class="tce-flex tce-flex-col tce-gap-1 tce-mt-1"> | ||
| @for (error of validationErrors(); track $index) { | ||
| <a class="tce-error-summary-link tce-underline" href="#{{ error.inputId }}" | ||
| ><strong>{{ error.errorMessage }}</strong></a | ||
| > | ||
| } | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { ErrorSummaryComponent } from './error-summary.component'; | ||
| import { ValidationError } from '../carbon-estimator-form/carbon-estimator-form.constants'; | ||
|
|
||
| describe('ErrorSummaryComponent', () => { | ||
| let component: ErrorSummaryComponent; | ||
| let fixture: ComponentFixture<ErrorSummaryComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [ErrorSummaryComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(ErrorSummaryComponent); | ||
| component = fixture.componentInstance; | ||
|
|
||
| const validationErrors: ValidationError[] = [ | ||
| { | ||
| inputId: 'input1', | ||
| errorMessage: 'Input 1 must be greater than 0', | ||
| }, | ||
| { | ||
| inputId: 'input2', | ||
| errorMessage: 'Input 2 must be greater than 0', | ||
| }, | ||
| ]; | ||
|
|
||
| fixture.componentRef.setInput('validationErrors', validationErrors); | ||
|
|
||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should display validation error messages', () => { | ||
| expect(fixture.nativeElement.textContent).toContain('Input 1 must be greater than 0'); | ||
| expect(fixture.nativeElement.textContent).toContain('Input 2 must be greater than 0'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Component, ElementRef, input, ViewChild } from '@angular/core'; | ||
| import { ValidationError } from '../carbon-estimator-form/carbon-estimator-form.constants'; | ||
|
|
||
| @Component({ | ||
| selector: 'error-summary', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './error-summary.component.html', | ||
| }) | ||
| export class ErrorSummaryComponent { | ||
| validationErrors = input.required<ValidationError[]>(); | ||
| @ViewChild('errorSummary') summary!: ElementRef<HTMLDivElement>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,26 @@ | ||
| @media (prefers-color-scheme: dark) { | ||
| .apexcharts-legend-text { | ||
| @apply !tce-text-slate-50 | ||
| @apply !tce-text-slate-50; | ||
| } | ||
|
|
||
| input, select { | ||
| @apply tce-text-slate-600 | ||
| input, | ||
| select { | ||
| @apply tce-text-slate-600; | ||
| } | ||
|
|
||
| input.ng-invalid.ng-touched { | ||
| @apply tce-border-red-700 | ||
| @apply tce-border-red-700; | ||
| } | ||
|
|
||
| .tce-error-box { | ||
| @apply tce-text-white tce-bg-red-700 tce-p-1 tce-rounded tce-border tce-border-white | ||
| @apply tce-text-white tce-bg-red-700 tce-p-1 tce-rounded tce-border tce-border-white; | ||
| } | ||
|
|
||
| .tce-error-summary { | ||
| @apply tce-text-white tce-bg-red-700 tce-border-white; | ||
| } | ||
|
|
||
| .tce-error-summary-link { | ||
| @apply tce-text-white; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters