Create Form

Various ways to create Form Components

• Easy: the artisan command, generate form
• Blazing fast: sponsor artisan command, auto generate forms, for all models, WITH fields
• Manual: add the trait OR extend the component

Easy

Using the Artisan make command:

This command will create a new form component in app/Http/Livewire/Forms folder.

php artisan make:tall-form CreateUser --model=User

Make command options:

php artisan make:tall-form {name} {--model=Model} {--path=Http/Livewire/Forms} {--modelspath=Models} {--action=create} {--overwrite=false} {--skipexisting=false}

Options, and their default values.

• --path = App/Http/Livewire/Forms Output path.
• --modelspath = Models. You can set this to App or Any\\Path\\With\\Backslash /Or/Slash.
• --action = create. Options: create or edit. Controls which stub to be used
• --overwrite = false. WARNING: Overwrites ALL existing forms, without prompts.
• --skipexisting = false. If false && overwrite=false, you'll be prompted to confirm overwriting EACH existing file.

Stubs

• There are two stubs. One for create forms and one for update forms.
• Defined by the --action parameter in the make command.
• The --action=create stub is suitable for forms with optional route model binding.

Read more about route model binding ->

Examples

Create a component in the Controllers directory

php artisan make:tall-form TestCommand --model=User --path=Http/Controllers/Livewire/Forms

Use a model in the App directory, example: use App\User;

php artisan make:tall-form TestCommand --model=User --modelspath="App"

Auto generate forms for all Models

Auto generate forms, for all Eloquent models in your project, with fields for all db columns - using a single artisan command.
Please 💗 sponsor this package 🔗 to get access to this command.
Watch the demo on YouTube: https://www.youtube.com/watch?v=i4dVmFubXFs

php artisan make:tall-forms-for-all-models

Manual

Add the TallForm trait

The Artisan make command adds the TallForm trait to your Livewire Component.

use Tanthammar\TallForms\TallForm;
use Livewire\Component;

class SomeComponent extends Component
{
  use TallForm;
}

Or extend the TallFormComponent

For use cases where you want to avoid Trait method naming, collisions

use Tanthammar\TallForms\TallFormComponent;

class SomeComponent extends TallFormComponent
{
    //
}

Set your actions

After making a component, you may want to edit the fields, onCreateModel, onUpdateModel, and formTitle methods:

namespace App\Http\Livewire\Forms;

use App\Models\User;
use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallForm;

class CreateUser extends Component
{
    use TallForm;

    public function mount(?User $user)
    {
        //Gate::authorize()
        $this->fill([
            'formTitle' => trans('global.create').' '.trans('crud.user.title_singular'),
            'wrapWithView' => true,
            'showGoBack' => false,
        ]);
        $this->mount_form($user); // $user from hereon, called $this->model
    }
    
    public function onCreateModel($validated_data)
    {
        // Set the $model property in order to conditionally display fields when the model instance exists, on saveAndStayResponse()
        $this->model = User::create($validated_data);
    }

    // OPTIONAL method used for the "Save and stay" button, this method already exists in the TallForm trait
    public function onUpdateModel($validated_data)
    {
        $this->model->update($validated_data);
    }
    
    public function fields()
    {
        return [
            Input::make('Name')->rules('required'),
        ];
    }
}

You don't have to use the render() method in your form component or worry about a component view, because the package handles that automatically.

Protip: you can add the FillsColumns trait to your model for automatic $fillables via database column names.

Model

The model you pass in the mount_form($model) method is accessed as $this->model

Two ways to render form components

1. In a blade view

You use form components in views just like any other Livewire component. Don't forget to prefix the component name with the --path you defined in the artisan make:tall-form command. With the default path set to App/Http/Livewire/Forms, it would look like this:

<livewire:forms.create-user :user="$user"/>

2. Livewire Route, full page component

See the Model binding wiki page

Route::get('/user/{user?}', \App\Http\Livewire\Forms\CreateUser::class);