Form

Here you will find all form components including inputs

        
namespace Patrikjak\Utils\Common\View\Form;    

Features

Show / hide password in input

For password input you can use bindPasswordVisibilitySwitch function to show / hide password

        
import {bindPasswordVisibilitySwitch} from "./vendor/pjutils/form/helper.ts";
 
bindPasswordVisibilitySwitch();    

Reset input

When error occurs and you change input value, it will automatically hide error message. It is called in showErrors function

        
import {showErrors} from "./vendor/pjutils/form/helper.ts";
 
showErrors();    

Success / error notifications

When you submit form, it will show success or error notification. It works for default form handlers.

Controller.php

        
// Error response with errors
return new JsonResponse([
    'errors' => ['input-name' => 'Error message', 'input-email' => 'Error message'],
    // you can use ValidationException errors
    'errors' => $e->errors(),
], 422);
 
// Success response - message will be displayed in notification
return new JsonResponse([
    'message' => 'Form is valid',
]);    

Inputs

The input component is a reusable form input field with various customization options. It is designed to be used within Blade templates in a Laravel application.

Properties

You can use any of the well known properties for the input field. They will be passed to the input field as attributes.

Here are the properties for the input field:

        
string $name // The name attribute for the input field
string $type = 'text' // The type attribute for the input field
?string $label = null // The label text for the input field
?string $error  = null // The error message for the input field
bool $required = false // Whether the input field is required
?string $icon = null // The icon to be displayed with the input field    

Usage

Classic

Classic text form input

        
<x-pjutils::form.input name="input_name" label="Input label" />    

With icon

You can use any of the icons from the Icon enum. Here is an example with the INFO icon.

        
@use('Patrikjak\Utils\Common\Enums\Icon')
 
<x-pjutils::form.input name="input_icon" label="Input label" :icon="Icon::INFO" />    

With error message

        
<x-pjutils::form.input name="input_error" label="Input label" error="Input is required" />    

Disabled

        
<x-pjutils::form.input name="input_disabled" label="Input label" disabled value="Test value" />    

Email

If you want to use an email input field, you can use the email component.

        
<x-pjutils::form.email name="input_email" label="Email label" />
{{-- Is same as --}}
<x-pjutils::form.input type="email" name="input_email_type" label="Email label" />    

Password

If you want to use a password input field, you can use the password component.

        
<x-pjutils::form.password name="input_password" label="Password label" />    

You can also pass confirm attribute to add also password confirmation input. You can set label and placeholder for confirmation input with confirmLabel and confirmPlaceholder attributes

        
<x-pjutils::form.password name="password-again" label="Password with confirmation" :confirm="true" confirmLabel="Label for confirmation" />    

Date

If you want to use a date input field, you can use the date component.

        
<x-pjutils::form.date name="input_date" label="Date label" />    

File

If you want to use a file input field, you can use the file component.

        
<x-pjutils::form.file name="input_file" label="File label" />    

Photo uploader

The photo uploader component is used to upload images. It includes a preview of the uploaded image and a button to remove the image.

        
@use('Patrikjak\Utils\Common\Dto\Image')
 
<x-pjutils::photo-uploader
    name="photo"
    label="Upload photo"
    id="custom-id"
    multiple
    :value="[new Image(asset('images/img1.png'), 'Image 1'), new Image(asset('images/img2.png'), 'Image 2'), new Image(asset('images/img3.png'), 'Image 3'), new Image(asset('images/img4.png'), 'Image 4')]"
/>    

You can use Patrikjak\Utils\Common\Http\Requests\Traits\FileUpload trait to get new and deleted files

        
class FormRequest extends BaseFormRequest
{
    use FileUpload;
}
 
$files = $request->getNewFiles('test-photo');
$deletedFiles = $request->getFilesToDelete('test-photo');    

You need to pass input name to these method

Textarea

If you want to use a textarea input field, you can use the textarea component.

        
<x-pjutils::form.textarea name="textarea" label="Textarea label" />    

If you want to use a textarea input field with a predefined value, you can pass the value attribute.

        
<x-pjutils::form.textarea name="textarea_filled" label="Textarea label" value="Filled value" />    

Select

If you want to use a select input field, you can use the select component.

As options you can pass an array or a collection of options. The options will be passed to the select field as options. The key will be the key of the array or collection

        
<x-pjutils::form.select name="select" label="Select label" :options="['Option 1', 'Option 2', 'Option 3']" />    

Checkbox

If you want to use a checkbox input field, you can use the checkbox component.

Add checked attribute if you want checked

        
<x-pjutils::form.checkbox name="checkbox" label="Checkbox A label" />
<x-pjutils::form.checkbox name="checkbox" label="Checkbox B label" checked />    

Radio

If you want to use a radio input field, you can use the radio component.

        
<x-pjutils::form.radio name="radio" label="Radio 1" id="radio-1" />
<x-pjutils::form.radio name="radio" label="Radio 2" id="radio-2" checked />    

Submit

If you want to use a submit button, you can use the submit component.

        
<x-pjutils::form.submit name="submit" label="Submit" />    

How to use it all together?

Here is an example of how to use all the components together.

Let's see how it looks in the code

your.blade.php

        
<x-pjutils::form method="POST" :action="route('dummy-form')" action-label="Submit label">
    <x-pjutils::form.input name="test-name" label="Input label" />
    <x-pjutils::form.email name="test-email" label="Email label" />
    <x-pjutils::form.password name="test-password" label="Password label" />
    <x-pjutils::form.date name="test-date" label="Date label" />
    <x-pjutils::form.file name="test-file" label="File label" />
    <x-pjutils::file-uploader
        name="photo"
        label="Upload photo"
        id="custom-id"
        multiple
        :value="[new Image(asset('images/img1.png'), 'Image 1'), new Image(asset('images/img2.png'), 'Image 2'), new Image(asset('images/img3.png'), 'Image 3'), new Image(asset('images/img4.png'), 'Image 4')]"
    />
    <x-pjutils::form.textarea name="test-textarea" label="Textarea label" />
    <x-pjutils::form.select name="test-select" label="Select label" :options="['Option 1', 'Option 2', 'Option 3']" />
    <x-pjutils::form.wrapper>
        <x-pjutils::form.checkbox name="test-checkbox-1" label="Checkbox 1 label" />
        <x-pjutils::form.checkbox name="test-checkbox-2" label="Checkbox 2 label" />
    </x-pjutils::form.wrapper>
    <x-pjutils::form.wrapper>
        <x-pjutils::form.radio name="test-radio" label="Radio 1 label" id="test-radio-1" />
        <x-pjutils::form.radio name="test-radio" label="Radio 2 label" id="test-radio-2" checked />
    </x-pjutils::form.wrapper>
</x-pjutils::form>    

api.php

        
Route::post('/dummy-form', [DummyController::class, 'testForm'])->name('dummy-form');    

DummyController.php

If you want to render errors in the form, you need to return JsonResponse with errors.

        
public function testForm(Request $request)
{
    try {
        $request->validate([
            'test-name' => 'required|string',
            'test-email' => 'required|email',
            'test-password' => 'required|string|min:8',
        ]);
    } catch (ValidationException $e) {
        return new JsonResponse([
            'errors' => $e->errors(),
        ], 422);
    }
 
    return new JsonResponse([
        'message' => 'Form is valid',
    ]);
}    

main.js

        
import Form from "./vendor/pjutils/form/Form.ts";
 
new Form().bindSubmit();