Blazor.NumberInput 1.0.1

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Blazor.NumberInput --version 1.0.1
                    


                    

                
NuGet\Install-Package Blazor.NumberInput -Version 1.0.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Blazor.NumberInput" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Blazor.NumberInput" Version="1.0.1" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Blazor.NumberInput" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Blazor.NumberInput --version 1.0.1
                    


                    

                
#r "nuget: Blazor.NumberInput, 1.0.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Blazor.NumberInput@1.0.1
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Blazor.NumberInput&version=1.0.1
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Blazor.NumberInput&version=1.0.1
                    


                            Install as a Cake Tool

๐Ÿ”ข Blazor NumberInput Component

Komponen Blazor kustom untuk input angka dengan dukungan validasi, format lokal, dan integrasi form yang fleksibel. Terdiri dari dua komponen utama:

๐Ÿ“ฆ Komponen

1. <NumberInput>

Komponen ringan dan fleksibel untuk input angka mandiri, tanpa tergantung pada EditForm.

โœ… Fitur Utama
  • Binding: @bind-NumberValue
  • Format angka (N0, F2, dsb)
  • Validasi manual via parameter Required
  • Prefix/Suffix (misal: Rp, %, kg)
  • Dukungan MinValue, MaxValue, Step
  • Dukungan parsing lokal (CultureInfo)
  • Navigasi keyboard โ†‘ โ†“
  • Event interaktif: @oninput, @onchange, @onpaste
  • Atribut tambahan HTML (AdditionalAttributes)
๐Ÿงฉ Contoh
<NumberInput @bind-NumberValue="amount"
             Placeholder="Masukkan jumlah"
             DisplayPrefix="Rp"
             Format="N0"
             Required="true"
             RequiredValueValidationMessage="Wajib diisi" />

2. <NumberInputBase>

Turunan dari InputBase<decimal?>, ideal untuk integrasi EditForm dan validasi otomatis dengan anotasi data ([Required], [Range], dsb).

โœ… Fitur Tambahan
  • Binding: @bind-Value
  • Terintegrasi otomatis dengan EditForm
  • Validasi otomatis dengan DataAnnotations
  • Mendukung ValidationMessage
  • Dukungan semua fitur <NumberInput> (format, batasan, kultur, dsb)
  • Mengikuti pipeline Blazor standar
๐Ÿงฉ Contoh
<EditForm Model="model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <NumberInputBase @bind-Value="model.Amount"
                     Placeholder="Masukkan jumlah"
                     DisplayPrefix="Rp"
                     Format="N0" />
    <ValidationMessage For="@(() => model.Amount)" />
</EditForm>

๐Ÿ”ฌ Perbandingan Singkat

Fitur / Aspek <NumberInput> <NumberInputBase> (InputBase)
Binding @bind-NumberValue @bind-Value
Validasi Otomatis โŒ Manual โœ… Ya, via EditForm
Digunakan dalam EditForm Opsional โœ… Direkomendasikan
Prefix / Suffix โœ… โœ…
Keyboard โ†‘ โ†“ Step โœ… โœ…
Atribut HTML tambahan โœ… โœ…
Reusabilitas (form standar) โš ๏ธ Perlu usaha โœ… Sesuai konvensi Blazor
Berat & fleksibilitas Ringan & bebas Standar & konsisten

๐Ÿ“˜ Dokumentasi Properti Umum

Parameter Tipe Deskripsi
NumberValue / Value decimal? Nilai angka (nullable).
Format string Format angka, contoh: "N0", "F2"
DecimalPlaces int Presisi parsing desimal
Culture CultureInfo Kultur lokal seperti new("id-ID")
MinValue, MaxValue decimal? Batas bawah & atas nilai
Step decimal? Besar kenaikan nilai saat โ†‘โ†“
Placeholder string? Placeholder input
DisplayPrefix / Suffix string? Teks tambahan sebelum/sesudah nilai
Required bool? Menandakan wajib diisi (manual)
RequiredValueValidationMessage string? Pesan validasi jika Required=true
AdditionalAttributes Dictionary<string, object>? Atribut tambahan seperti data-*, style, dll.

๐Ÿš€ Rekomendasi Penggunaan

  • Gunakan <NumberInput> jika:

    • Butuh komponen input angka ringan
    • Tidak menggunakan EditForm
    • Ingin kontrol validasi manual

  • Gunakan <NumberInputBase> jika:

    • Menggunakan EditForm
    • Ingin validasi otomatis dari model
    • Mengikuti pola InputBase<T> Blazor

๐Ÿ‘จโ€๐Ÿ’ป Pengembang

Dibuat oleh ganiputras ยท MIT License ยท Kompatibel Blazor Server & WASM

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.1 92 7/28/2025
1.0.0 213 7/26/2025 1.0.0 is deprecated.

Blazor.NumberInput v1.0.1

โœ… Perubahan:
- Penambahan dokumentasi XML dan komentar dalam kode untuk semua parameter komponen.
- Penambahan validasi `Required` manual dengan pesan error kustom (dalam UI).
- Dukungan validasi tombol input secara eksplisit (0โ€“9 dan separator desimal lokal).
- Penanganan tombol โ†‘ dan โ†“ untuk menaikkan/menurunkan nilai sesuai step.
- Pembersihan dan penyempurnaan event `oninput`, `onchange`, `onblur`, `onkeydown`, dan `onpaste`.
- Perbaikan debounce input agar lebih stabil saat mengetik/paste.
- Otomatis format ulang angka saat kehilangan fokus (`AutoFormatOnBlur = true`).
- Penyempurnaan parameter `AdditionalAttributes`, `Prefix`, `Suffix`, dan `TextAlign`.

📚 Dokumentasi:
- Tersedia dokumentasi dan readme interaktif di GitHub:  
 🔗 https://github.com/ganiputras/Blazor.NumberInput

โš ๏ธ Catatan:
- Versi ini menggantikan versi 1.0.0 yang mengandung metadata NuGet (link repository) yang salah.