TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • If you want your buttons elsewhere
  • Create the form
  • Create a form view
  • Create a route view
  • Create a route

Was this helpful?

  1. Create Forms
  2. Form Types

Without buttons

requires an Eloquent Model

PreviousAs modalNextFields only

Last updated 3 years ago

Was this helpful?

If you want your buttons elsewhere

Sometimes you want the form buttons placed outside of the form template.

Create the form

Command option --action=no-buttons will set the component to extend TallFormWithoutButtons. See form, for more options

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'),
        ];
    }
}

Create a form view

Important the form view must contain the blade directive that renders the form fields: @include('tall-forms::without-buttons')

resources/livewire/without-buttons.blade.php

<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>

Create a route view

resources/views/without-buttons.blade.php

@extends('layouts.app')
@section('content')
    <livewire:forms.user-without-buttons :user="\App\User::first() ?? new \App\User" />
@endsection

Create a route

web.php

Route::view('/without-buttons', 'without-buttons')->name('without-buttons');
Standard