FormField

Asocia etiqueta, ayuda, error y complementos de texto con un control proyectado.

Categoría: Formularios y selección
Import: @neural-ui/core/form-field
Selector: neu-form-field

import { NeuFormFieldComponent } from '@neural-ui/core/form-field';

Uso

Proyecta tu input o textarea. forId debe coincidir con el id real del control; id define una base estable para los IDs de etiqueta, ayuda y error. Exporta el campo como neuFormField y conecta labelId() y mergeDescribedBy() al control nativo. prefix y suffix añaden texto a sus lados. error renderiza una alerta, pero no valida ni modifica el control hijo automáticamente.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Importe

€

EUR

Introduce el importe sin impuestos.

La aplicación aporta la validación y conecta los IDs de las descripciones.

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

Importe

€

EUR

Introduce el importe sin impuestos.

Etiqueta

Ayuda

Mensaje de error

Prefijo

Sufijo

ID base del campo

ID del control / forId

Control proyectado de solo lectura

Control proyectado deshabilitado

<neu-form-field
  #field="neuFormField"
  id="amount-field"
  forId="amount-control"
  label="Importe"
  hint="Introduce el importe sin impuestos."
  error=""
  prefix="€"
  suffix="EUR"
  size="md"
>
  <neu-number-input
    inputId="amount-control"
    size="md"
    [readonly]="false"
    [disabled]="false"
    [ariaLabelledBy]="field.labelId()"
    [ariaDescribedBy]="field.mergeDescribedBy()"
    [invalid]="!!field.error()"
    [(value)]="value"
  />
</neu-form-field>

Datos y contenido

FormField no gestiona valor, validación ni Outputs. La aplicación aporta ayuda y error y conecta las relaciones del control. El estilo del control nativo en los ejemplos pertenece a la aplicación, no a un input oculto de FormField.

Accesibilidad y teclado

Usa forId para activar el control desde la etiqueta y aria-labelledby cuando proceda. mergeDescribedBy() combina tus IDs de descripción con los de ayuda y error sin duplicados. Aplica aria-invalid al hijo cuando la validación encuentre un error. Evita una segunda etiqueta que compita con la del campo.

Tecla	Acción
`Tab`	Sigue el orden normal de foco de enlaces, campos y acciones del contenido; el contenedor no añade un modelo de foco móvil.
`Enter`	Activa un botón nativo enfocado o sigue un enlace enfocado dentro del contenido.
`Space`	Activa un botón nativo enfocado dentro del contenido; los campos mantienen la edición normal de texto.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template disponible tiene un ejemplo ejecutable.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`error`	`string`	`''`	`[error]`	Texto de error aportado por la aplicación, renderizado como alerta.
`forId`	`string`	`''`	`[forId]`	ID del input proyectado al que apunta la etiqueta nativa.
`hint`	`string`	`''`	`[hint]`	Texto de ayuda aportado por la aplicación.
`id`	`string`	`''`	`[id]`	ID base estable para las relaciones del campo.
`label`	`string`	`''`	`[label]`	Etiqueta visible del control proyectado.
`prefix`	`string`	`''`	`[prefix]`	Complemento de texto antes del control.
`size`	`NeuFormFieldSize`	`'md'`	`[size]`	Escala del campo: sm, md o lg.
`suffix`	`string`	`''`	`[suffix]`	Complemento de texto después del control.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`*` Control nativo o personalizado Ver ejemplo	Proyección de contenido Conecta explícitamente el ID real del control y sus relaciones de etiqueta y descripción.	`<ng-content />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Control proyectado

*

Referencia

Utiliza la referencia de tu factura.

Métodos públicos

Nombre	Contrato
`mergeDescribedBy`	`mergeDescribedBy(...ids: Array<string \| null \| undefined>): string;`

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuFormFieldSizeTypeScript

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-space-2`	Separación entre contenido y controles	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.5rem`
`--neu-text-base`	Tamaño del texto	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`1rem`
`--neu-text-lg`	Tamaño del texto	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`1.125rem`
`--neu-text-sm`	Tamaño del texto	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.875rem`