8. Cómo agregar un campo numérico en Filament 5 – Capturando teléfonos con validación inteligente

Hoy vas a agregar un campo especial para números. No más letras mezcladas con teléfonos, ni símbolos raros en campos que deberían ser solo dígitos. Tu formulario ahora rechazará automáticamente cualquier caracter que no sea numérico.

🎯 Objetivo de hoy

Agregar un campo de teléfono numérico usando ->numeric() en CustomerForm.php.

🖥️ Antes / Después

Antes: No hay forma de guardar el teléfono del cliente. Si lo agregaras como texto normal, alguien podría escribir «abc123» o «55-12-34-56» mezclando letras y símbolos.

Después: Un campo dedicado al teléfono que solo acepta números. Intenta escribir una letra y… ¡no pasa nada! El campo simplemente la ignora. El teclado en móviles mostrará solo dígitos.

📁 Estructura de carpetas (mapa de hoy)

app/Filament/Resources/
└── Customers/                    ⚪ Carpeta del Resource
    ├── CustomerResource.php      ⚪ No lo tocamos hoy
    ├── Pages/                    ⚪ No lo tocamos hoy
    |   ├── CreateCustomer.php   ⚪ No lo tocamos hoy
    |   ├── EditCustomer.php     ⚪ No lo tocamos hoy
    |   └── ListCustomers.php    ⚪ No lo tocamos hoy
    ├── Schemas/
    |   └── CustomerForm.php      🟡 🎯 AQUÍ TRABAJAMOS HOY
    └── Tables/
        └── CustomersTable.php   ⚪ No lo tocamos hoy

Hoy modificamos solo el archivo marcado con 🟡. Los demás archivos existen pero no los tocaremos.

📋 Paso 1: Tu código de ayer

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
            ]);
    }
}

➕ Paso 2: Tu ladrillo de hoy (2 líneas)

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

// 🔧 Implementamos: Campo numérico para teléfono
// Agregamos ->numeric() para forzar solo números
TextInput::make('phone')
    ->numeric(),

El método ->numeric() convierte el campo en numérico. En móviles abre el teclado numérico automáticamente y bloquea letras en escritorio.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo modificado

Ruta completa: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
                TextInput::make('phone')
                    ->numeric(),
            ]);
    }
}

🎉 Verifica tu magia

Abre tu navegador en /admin/customers/create y deberías ver:

• Un tercer campo llamado «Phone» debajo del email
• Intenta escribir letras → No aparecen nada en el campo
• Intenta escribir «123abc» → Solo aparece «123»
• En un móvil, al tocar el campo aparece el teclado numérico

¿No ves el campo phone? Revisa que hayas agregado la coma después de ->email() en el campo anterior, y que cierres correctamente el array con ]);.

---

💬 ¿Viste cómo se comporta el campo? Es mágico: las letras simplemente no existen para él. Tus datos serán más limpios y consistentes.

Mañana aprenderemos a agregar un selector de fechas para la fecha de nacimiento. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Text Input – Numeric

➡️ Próximo paso: Agregar DatePicker para fecha de nacimiento con DatePicker::make('birth_date').