Sometimes you want the form buttons placed outside of the form template.
php artisan make:tall-form UserWithoutButtons --action=no-buttons --model=User
<?php
namespace App\Http\Livewire\Forms;
use App\User;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallFormWithoutButtons;
class UserWithoutButtons extends TallFormWithoutButtons
{
//TODO set your view path.name here
protected string $view = 'livewire.without-buttons';
public function mount(?User $user)
{
$this->mount_form($user);
}
protected function formAttr(): array
{
return [
'formTitle' => "Form without buttons",
];
}
// OPTIONAL method
protected function onCreateModel($validated_data)
{
$this->model = User::create($validated_data);
}
// OPTIONAL method
protected function onUpdateModel($validated_data)
{
$this->model->update($validated_data);
}
protected function fields(): array
{
return [
Input::make('Name')->rules('required|in:Anna'),
Input::make('Email')->type('email')->rules('required|email'),
];
}
}
<div>
<div>{{ $form->formTitle }}</div>
<div class="px-6 sm:px-0 tf-form">
<form x-data wire:submit.prevent="saveAndStay" novalidate> {{-- novalidate = block browser validation that prevents form submission before backend validation --}}
{{—— mandatory: renders the form fields, without buttons --}}
@include('tall-forms::without-buttons')
{{-- optional: add $dispatch 'replace-errors' to the submit button, if you want to display error message notifications --}}
<button type="submit" x-on:click="$dispatch( 'replace-errors', {{ tfjs::from($errors->all()) }} )">Submit</button>
</form>
</div>
</div>
@extends('layouts.app')
@section('content')
<livewire:forms.user-without-buttons :user="\App\User::first() ?? new \App\User" />
@endsection
Route::view('/without-buttons', 'without-buttons')->name('without-buttons');