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
  • Example 1:
  • Example 2:
  • Observe:
  • Example 3:
  • Example 4:

Was this helpful?

  1. Fields

Conditional field

You can display a field based on a condition.

Only null or a Field instance, are allowed conditional values!

Example 1:

public bool $someBoolean = true;

protected function fields()
{
    return [
       $this->someBoolean 
          ? Input::make('Conditional Field 1')->required() 
          : Input::make('Conditional Field 2')->required(),
    ];
}

Example 2:

If the field depends on third party javascript libraries like FlatPickr (DatePicker field) or Trix.

You cannot switch visibility because the JS instance won't be destroyed, or the external script won't be loaded if the condition is false.

The way around it is to add class hidden to the field-root.

DatePicker::make(__('Birthday'), 'birthday')
    ->rootAttr($this->someBoolean ? [] : [ 'class' => 'hidden' ], true)
    ->locale('en')
    ->placeholder('Select a date...')
    ->includeExternalScripts(),

Observe:

When hiding fields with class hidden, the data properties will always exist in $form_data and $validated_data This is important in onCreateModel() and onUpdateModel()

Example 3:

protected function conditional()
{
    if ($this->something === "No") {
        return false; //the field will be omitted
    } else {
        return true; //the field will be included
    }
}

protected function fields()
{
    return [
        $this->conditional() 
            ? Input::make('Conditional Field')->required() 
            : null,
    ];
}

Example 4:

public bool $someBoolean = true;

protected function fields()
{
    return [
        $this->someMethod(),
    ];
}

protected function someMethod()
{
    if($this->someBoolean)) {
        return Input::make('Conditional Field')->required(); 
    } else {
        return null;
    }
}

PreviousCustom field attributesNextCustom view

Last updated 3 years ago

Was this helpful?

You might want to filter out those properties when saving your component. Depending on the state of your condition. Please see this issue for a detailed example:

https://github.com/tanthammar/tall-forms/issues/105#issuecomment-1029088173