NumberInput

Uso

El modelo es number | null, nunca texto formateado. formatOptions configura el idioma, los decimales y la moneda opcional. min/max limitan los valores aceptados; step controla los botones. inputDetail distingue texto válido, incompleto o inválido sin sustituir el modelo confirmado.

Ejemplos

Interactúa con el ejemplo y abre Código para ver su implementación completa.

25

Prueba y configura

Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.

25

<neu-number-input
  [(value)]="number"
  [min]="0"
  [max]="100"
  [step]="1"
  layout="stacked"
  size="md"
  [formatOptions]="formatOptions"
  [decrementLabel]="'Disminuir'"
  [floatingLabel]="true"
  [incrementLabel]="'Aumentar'"
  [label]="'Cantidad'"
/>

import { signal } from '@angular/core';

export const number = signal(25);

export const formatOptions = {
  "locale": "es-ES",
  "style": "decimal",
  "maximumFractionDigits": 2
};

Signal Forms

Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige un valor no vacío. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.

Guía de Signal Forms

{
  "field": null
}

Valor y eventos

Utiliza [(value)] o [value] junto con (valueChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.

Accesibilidad y teclado

Asocia label al campo numérico. Nombra los botones mediante incrementLabel/decrementLabel. ArrowUp/ArrowDown cambia el valor según step; Home/End utiliza los límites configurados. Explica el texto inválido o incompleto con un mensaje, no solo con color.

API

Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Este componente no tiene templates públicos.

Inputs

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

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

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

import type { NeuNumberInputState } from '@neural-ui/core/number-input';

import type { NeuNumberInputDetail } from '@neural-ui/core/number-input';

// Declaración pública (solo referencia)
export interface NeuNumberInputDetail {
  readonly rawText: string;
  readonly state: NeuNumberInputState;
  readonly value: number | null;
}

import type { NeuNumberInputFormatOptions } from '@neural-ui/core/number-input';

// Declaración pública (solo referencia)
export type NeuNumberInputFormatOptions = (NeuNumberInputFormatBase & {
    readonly style?: 'decimal';
    readonly currency?: never;
}) | (NeuNumberInputFormatBase & {
    readonly style: 'currency';
    readonly currency: string;
});

import type { NeuNumberInputLayout } from '@neural-ui/core/number-input';

// Declaración pública (solo referencia)
export type NeuNumberInputLayout = 'horizontal' | 'stacked' | 'vertical';

import type { NeuNumberInputState } from '@neural-ui/core/number-input';

// Declaración pública (solo referencia)
export type NeuNumberInputState = 'valid' | 'incomplete' | 'invalid';

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Componentes relacionados

Utiliza los controles relacionados para otro tipo de valor o interacción.

• InputMask
• InputOTP
• InputTags