Creating Dynamic HTML Form using Laravel Blade Components

Hello Artisan,

In this example, I will show you the professional use of Laravel blade components. In this tutorial, I will create some custom blade components and by using them, I will create a dynamic HTML form and also show you the error messages with those components.

After creating the form, I will submit this form and show an error message using that dynamic component. If you don't know how Laravel blade component works, then this tutorial is exactly for you.

Before starting this tutorial, please read this article if you don't know about laravel component. 

Recommended: Create and Use Reusable Laravel Component Like Vue React Js

Now let's see how to create laravel blade component to dynamically render HTML. Let's start:

Step 1: Create Component

To create a dynamic html form using laravel blade component, run below command to create some components like input, button and error. So let's create

php artisan make:component Error/Error
php artisan make:component Form/Type/Input
php artisan make:component Form/Type/Button

Step 2: Update Blade Component

Now update those components like below to show error messages and creating a dynamic HTML form.

resources/views/components/error/error.blade.php

resources/views/components/form/type/input.blade.php

resources/views/components/form/type/button.blade.php

Step 3: Update Component Class

Now in this step, we need to update the class component for creating our dynamic HTML form. So let's do it.

App\View\Components\Error\Error.php

namespace App\View\Components\Error;

use Illuminate\View\Component;

class Error extends Component
{
    public function __construct()
    {

    }

    public function render()
    {
        return view('components.error.error');
    }
}

App\View\Components\Form\Type\Button.php

namespace App\View\Components\Form\Type;

use Illuminate\View\Component;

class Button extends Component
{
    public $type;

    public $class;

    public function __construct($type, $class)
    {
        $this->type  = $type;
        $this->class = $class;
    }

    public function render()
    {
        return view('components.form.type.button');
    }
}

App\View\Components\Form\Type\Input.php

namespace App\View\Components\Form\Type;

use Illuminate\View\Component;

class Input extends Component
{   
    public $name;
   
    public $id;

    public $class;

    public function __construct($name, $id, $class)
    {
        $this->name  = $name;
        $this->id    = $id;
        $this->class = $class;
    }

    public function render()
    {
        return view('components.form.type.input');
    }
}

Step 3: Create Route

In this step, we have to create our route. So create it like below:

routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TestController;

Route::get('/', [TestController::class, 'index'])->name('task');
Route::post('/', [TestController::class, 'store']);

Step 4: Create Controller

Now in this step, we have to create our controller to show our dynamic reusable HTML form using laravel blade component. So create it and update this controller like below.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\View\Components\Error\Error;
use Illuminate\Support\Facades\Route;

class TestController extends Controller
{
    public function index()
    {
      return view('welcome');
    }
  
    public function store(Request $request)
    {
      $request->validate([
        'name'    => 'required',
        'address' => 'required',
      ]);

    }
}

Step 5: Create Blade

We are in the final step, In this step, we will create a welcome.blade.php file and will show our form using our blade components.

resources/views/welcome.blade.php

Read also: Show Error Message in Laravel Using Custom Blade Directive

Have a look, how pretty our HTML form is right now. Hope it can help you.