Level 104
number_format will format a given number as a string with grouped thousands
1 like
Dec 25, 2022
9
Level 1
Add comma to numbers every three digits
How can I format numbers using a comma separator every three digits in livewire?
WITHOUT SAVING IN THE DATABASE ONLY WHILE WORKING WITH PRICE INPUT
For example:
input => 298 | 2984 | 297312984
output => 298 | 2,984 | 297,312,984
Level 1
@tykus Yeah, I Know this PHP Function, but I want to save the input value in a big-integer column type and without commas. only in the view, I want to display a separated number by commas in the price input.
Level 104
Level 1
@tykus it also set commas in the backend I want sth to be set in view only!
Level 2
To format a number with a comma separator every three digits in the view, without modifying the actual value of the input field or saving it to the database with commas, you can use Livewire's @input directive to bind the value of the input field to a component property, and then use the number_format function to format the value for display in the view.
<!-- In your Livewire component -->
@php
// Store the unformatted price in a component property
$this->price = number_format($this->price, 0, '', '');
@endphp
<!-- In your view -->
<input type="text" wire:model="price" @input="$set('price', number_format(event.target.value, 0, '', ''))">
<!-- Display the formatted price in a separate element -->
<p>Formatted price: {{ number_format($price, 0, '', ',') }}</p>
This will bind the value of the input field to the $price component property, and then use the @input directive to update the value of the $price property every time the input field is changed. The value of the $price property is then formatted using the number_format function and displayed in a separate element.
Note that this approach will only format the value for display in the view. The actual value of the input field will remain unformatted, so you can still use it for calculations or save it to the database without any issues.
1 like
Level 1
@erhanurgun Perfect, But the new problem is that i have a hundred inputs and different variables.
Level 2
@iliaghz If you have a large number of input fields and variables that you want to format with a comma separator every three digits, you can create a custom Blade directive to handle the formatting for you. Blade directives are custom PHP functions that you can call in your views, and they allow you to encapsulate complex logic and reuse it throughout your application.
Here's an example of how you can create a custom directive to format a number with a comma separator every three digits:
// Path: App\Providers\AppServiceProvider
use Illuminate\Support\Facades\Blade;
public function boot()
{
Blade::directive('numberFormat', function ($expression) {
return "<?php echo number_format($expression, 0, '', ','); ?>";
});
}
This will create a new Blade directive called @numberFormat that you can use in your views to format a number with a comma separator every three digits. To use the directive, you can simply pass the number that you want to format as an argument:
@numberFormat($price)
You can use this directive in any of your input fields or variables that you want to format. For example:
<input type="text" wire:model="price" @input="$set('price', number_format(event.target.value, 0, '', ''))">
<p>Formatted price: @numberFormat($price)</p>
This will format the value of the $price variable with a comma separator every three digits, both in the input field and in the separate element.
1 like
Level 51
Use mask plugin and then transform the value before validation or storing in the database.
The plugin: https://alpinejs.dev/plugins/mask
public function sumbit()
{
$this->price = floatval(preg_replace('/[^\d.]/', '', $this->price));
$this->validate();
}
1 like
Level 1
@MohamedTammam ok, but what to do if I have many components and variables?
Please or to participate in this conversation.