accessibility:forms:errors
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
accessibility:forms:errors [2023/08/07 18:07] – created scl | accessibility:forms:errors [2025/03/21 12:25] (current) – draft of error summary component usage sleary | ||
---|---|---|---|
Line 15: | Line 15: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | |||
+ | ===== Using the Error Summary component ===== | ||
+ | |||
+ | **Subject to change; this feature is still in development. See [[https:// | ||
+ | |||
+ | The error summary component lists required & invalid form fields as links | ||
+ | leading directly to the invalid inputs, with link text generated from the | ||
+ | fields' | ||
+ | |||
+ | 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: | ||
+ | |||
+ | < | ||
+ | ... | ||
+ | < | ||
+ | |||
+ | |||
+ | (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, | ||
+ | see whether the error list is empty. | ||
+ | |||
+ | You will need to call '' | ||
+ | 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: | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | 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: | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | The error summary can list errors across NgbNav tabs if the nav contents | ||
+ | are not destroyed on tab change; see | ||
+ | https:// | ||
+ | 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. | ||
+ |
accessibility/forms/errors.1691446025.txt.gz · Last modified: 2023/08/07 18:07 by scl