DESY

Sistema de Diseño del Gobierno de Aragón.

Resumen de errores

Mensaje de error que aparece al validar los formularios.

Error-summary

Mostrar parámetros

Parámetros del componente

              params:
- name: titleText
  type: string
  required: true
  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: titleHtml
  type: string
  required: true
  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
- name: descriptionText
  type: string
  required: false
  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
- name: descriptionHtml
  type: string
  required: false
  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
- name: errorList
  type: array
  required: true
  description: Contains an array of error link items and all their available arguments.
  params:
  - name: href
    type: string
    required: false
    description: Href attribute for the error link item. If provided item will be an anchor.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the error link anchor.
- name: classes
  type: string
  required: false
  description: Classes to add to the error-summary container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the error-summary container.

accessibilityCriteria: |
  - Must be focused when the page loads
              
            

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Con encabezado de nivel 3

Mostrar códigodel ejemplo: Con encabezado de nivel 3

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Título con h3",
  "headingLevel": 3,
  "errorList": [
    {
      "text": "El campo de Nombre no puede estar vacío.",
      "href": "#example-error-1"
    },
    {
      "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
      "href": "#example-error-2"
    }
  ]
}) }}

Sin enlaces

Mostrar códigodel ejemplo: Sin enlaces

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    }
  ]
}) }}

Con y sin enlaces

Mostrar códigodel ejemplo: Con y sin enlaces

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}

Con todo

Mostrar códigodel ejemplo: Con todo

Contenido

Nunjucks macro

{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}

{{ componentErrorSummary({
  "titleText": "Problemas encontrados",
  "headingLevel": 2,
  "descriptionText": "Por favor, corrige los problemas siguientes.",
  "errorList": [
    {
      "text": "Nombre de usuario o contraseña incorrectos."
    },
    {
      "text": "Acepta los términos del servicio para acceder.",
      "href": "#example-error-1"
    }
  ]
}) }}