Formular: Fehlerliste

Fehlerlisten stehen am Anfang von Formularen mit mehr als einem fehlerhaften Element. Sie dienen als übersichtliche Zusammenfassung der Fehler und zur Navigation. Jede Fehlermeldung ist verlinkt und führt zum jeweiligen Eingabefeld.

Varianten

Formular: Fehlerliste

Beispiel Formular: Live-Validierung nach Absenden eines fehlerhaften Formulars

Vorschau

Bitte Vorname ausfüllen

Ungültiges Zeichen & in Familienname

Bitte Hausnummer angeben

Bitte Flugobjekt auswählen

Bitte Führerscheintyp auswählen

Code

<wm-formerrorsummary>
  <li><a href="#vorname">Bitte Vorname ausfüllen</a></li>
  <li><a href="#familienname">Ungültiges Zeichen &amp; in Familienname</a></li>
  <li><a href="#hausnummer">Bitte Hausnummer angeben</a></li>
  <li><a href="#flugobjekt">Bitte Flugobjekt auswählen</a></li>
  <li><a href="#schein1">Bitte Führerscheintyp auswählen</a></li>
</wm-formerrorsummary>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/FormErrorsummary/FormErrorsummary.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/FormBlock/FormBlock.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Notification/Notification.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/List/List.js" type="module"></script>

JavaScript

import { FormErrorsummary } from './wienermelange/assets/js/components/FormErrorsummary/FormErrorsummary.js';
    import { FormBlock } from './wienermelange/assets/js/components/FormBlock/FormBlock.js';
    import { Notification } from './wienermelange/assets/js/components/Notification/Notification.js';
    import { List } from './wienermelange/assets/js/components/List/List.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`heading`	Überschrift für die Fehlerliste. [ERRORS] ist ein Platzhalter für die Anzahl der Fehler, der automatisch ersetzt wird.	`String`	`Es gibt [ERRORS] Fehler auf der Seite:`
`noFocus`	Autofocus deaktivieren Wenn auf 'true' gesetzt, wird der erste Fehlereintrag nicht automatisch fokussiert, was nützlich sein kann, wenn die Fehlerübersicht in einem Modal oder einer anderen Komponente verwendet wird, die ihren eigenen Fokus verwaltet.	`Boolean`	`false`
`errors`	Anzahl der Fehler Diese Eigenschaft wird automatisch aktualisiert, wenn Fehlereinträge hinzugefügt oder entfernt werden. Der Wert wird in der Überschrift angezeigt.	`Number`	`0`

Slots

Name	Beschreibung
`default`	Text bzw. Fehlereinträge (normalerweise vom Formular automatisch befüllt)

Events

Event	Beschreibung	Rückgabewert
`jump-to-error`	Wird ausgelöst, wenn auf einen Fehlereintrag geklickt wird Der Event enthält die ID des Feldes als `event.detail.id`

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at