F
Filament•3w ago
aster255

Adding a form to a Livewire component

this is the schema for the migration on my contact-us-messages 
    public function up(): void
    {
        Schema::create('contact_messages', function (Blueprint $table) {
            $table->id();
            $table->string("first_name", 100);
            $table->string("last_name", 100);
            $table->string("email")->index();
            $table->string("phone_number", 20)->nullable();
            $table->text("message");
            $table->string("ip_address", 45)->nullable(); 
            $table->timestamps();
        });
    }
    public function up(): void
    {
        Schema::create('contact_messages', function (Blueprint $table) {
            $table->id();
            $table->string("first_name", 100);
            $table->string("last_name", 100);
            $table->string("email")->index();
            $table->string("phone_number", 20)->nullable();
            $table->text("message");
            $table->string("ip_address", 45)->nullable(); 
            $table->timestamps();
        });
    }
php artisan make:livewire-form CreateCm --generate
What is the model name? ❯ ContactMessages Which namespace would you like to create this in? Create ❯ 0 and was able to display the form @livewire('create-cm') the issue is when submitting messages via the form schema Forms\Components\Textarea::make('message') ->required() ->columnSpanFull(), even if i enter texts in the message part i am getting "The message field is required." i also tried using richtext and it also wouldn't work. hmmm no issue if changing it to TextInput
No description
7 Replies
LeandroFerreira
LeandroFerreira•3w ago
LeandroFerreira
LeandroFerreira•3w ago
This article can also help you
Filament
Form Builder - Common Errors to Avoid by Leandro Ferreira - Filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
aster255
aster255OP•3w ago
<?php

namespace App\Livewire;

use App\Models\ContactMessages;
use Filament\Forms;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;
use Illuminate\Contracts\View\View;

class CreateCm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('first_name')
                    ->required()
                    ->maxLength(100),
                Forms\Components\TextInput::make('last_name')
                    ->required()
                    ->maxLength(100),
                Forms\Components\TextInput::make('email')
                    ->email()
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('phone_number')
                    ->tel()
                    ->maxLength(20)
                    ->default(null),
                Forms\Components\Textarea::make('message')
                    ->required()
                    ->columnSpanFull(),
                Forms\Components\TextInput::make('ip_address')
                    ->maxLength(45)
                    ->default(null),
            ])
            ->statePath('data')
            ->model(ContactMessages::class);
    }

    public function create(): void
    {
        $data = $this->form->getState();

        $record = ContactMessages::create($data);

        $this->form->model($record)->saveRelationships();
    }

    public function render(): View
    {
        return view('livewire.create-cm');
    }
}
<?php

namespace App\Livewire;

use App\Models\ContactMessages;
use Filament\Forms;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;
use Illuminate\Contracts\View\View;

class CreateCm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('first_name')
                    ->required()
                    ->maxLength(100),
                Forms\Components\TextInput::make('last_name')
                    ->required()
                    ->maxLength(100),
                Forms\Components\TextInput::make('email')
                    ->email()
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('phone_number')
                    ->tel()
                    ->maxLength(20)
                    ->default(null),
                Forms\Components\Textarea::make('message')
                    ->required()
                    ->columnSpanFull(),
                Forms\Components\TextInput::make('ip_address')
                    ->maxLength(45)
                    ->default(null),
            ])
            ->statePath('data')
            ->model(ContactMessages::class);
    }

    public function create(): void
    {
        $data = $this->form->getState();

        $record = ContactMessages::create($data);

        $this->form->model($record)->saveRelationships();
    }

    public function render(): View
    {
        return view('livewire.create-cm');
    }
}
My file after reading 5x, the documentation above, anxious if its a skill issue on my part 😅 😅 if i change Forms\Components\Textarea::make('message') ->required() ->columnSpanFull(), to Forms\Components\TextInput::make('message') ->required() ->maxLength(100), i am able to submit and save...
LeandroFerreira
LeandroFerreira•3w ago
hey, did you solve it?
aster255
aster255OP•3w ago
okay i was able to solve it. my thesis partner was using 
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
in app.blade.php causing the "message" to not bind when using textarea when submitting.
LeandroFerreira
LeandroFerreira•3w ago
you don't need to add this
toeknee
toeknee•3w ago
I am guessing they haven't followed the docs and haven't add the js call

Did you find this page helpful?