Error summary

Resumen de los errores de un formulario al enviarlo, con el patrón de GOV.UK: un encabezado con el número de errores y un enlace por error al campo, por su controlId. Cada envío con errores le da el foco, así que el lector lo lee entero sin role="alert"; los campos siguen mostrando su error, sin anunciarlo (announceError=false) para no interrumpir. El enlace lleva el foco al campo, o al primer control de un grupo. Envía el formulario vacío para verlo.

Angular

Vue

<flt-error-summary [items]="errors" />
<flt-dni controlId="dni" label="DNI o NIE" [errorText]="…" [announceError]="false" />

errors = [{ fieldId: 'dni', message: 'Escribe un DNI o NIE válido' }];

<FltErrorSummary :items="errors" />
<FltDniInput control-id="dni" label="DNI o NIE" :error-text="…" :announce-error="false" />