Differences

This shows you the differences between two versions of the page.

--- accessibility:forms:errors [2025/03/20 23:08] – placeholder for error summary component usage notes sleary
+++ accessibility:forms:errors [2025/03/21 12:25] (current) – draft of error summary component usage sleary
@@ Line 18: / Line 18: @@
 ===== Using the Error Summary component =====
-TODO; see [[https://bugs.launchpad.net/evergreen/+bug/2102122|#2102122]]
+**Subject to change; this feature is still in development. See [[https://bugs.launchpad.net/evergreen/+bug/2102122|#2102122]]**
+The error summary component lists required & invalid form fields as links
+leading directly to the invalid inputs, with link text generated from the
+fields' labels and aria-descriptions (if present).
+By adding the error list as a ViewChild of the component containing the
+form, it is possible to check for errors and scroll to / focus on the
+list rather than disabling the form's submit button:
+   <eg-error-summary #errors></eg-error-summary>
+   ...
+   <button (click)="canSave ? save() : errors.checkErrors()">Save</button>
+(In addition to changing the click action and color of the button, you
+should also add a warning icon and/or change the button text, in case
+the user can't perceive color changes.)
+If the containing component does not already have a mechanism to check for valid
+form submissions, you can use ''getErrors()'' to refresh the list and ''hasErrors()'' to
+see whether the error list is empty.
+You will need to call ''getErrors()'' when field values change, or the submit button
+will never return to its initial state.
+Selectors for the container and the invalid fields can be provided using
+inputs to the component, so it can be used without an enclosing form
+element. For example, see the included changes to the patron edit form:
+   <eg-error-summary #errorList [containerSelector]="'.patron-edit-container'">
+   </eg-error-summary>
+The errors do not have to be form inputs. Any selector can be provided
+as an input to the error summary. This is useful when the inputs are not
+available until an Edit button is clicked, as in the holdings editor:
+   <eg-error-summary #errorList [errorSelector]="'.changed.invalid .card-header'">
+   </eg-error-summary>
+The error summary can list errors across NgbNav tabs if the nav contents
+are not destroyed on tab change; see
+https://ng-bootstrap.github.io/#/components/nav/examples#keep-content.
+In this case, the summary should be placed outside the nav component.
+The error list will be subdivided by tab label, and clicking an inactive
+tab's error link will first switch tabs, then focus on the error field.