Unable to catch and throw Errors on Page

#1

I’ve a multi-tabs form on all tabs validation works like a charm but on last tab I have functionality of a button which adds and removes forms on add / delete button click. Since these are multi-forms gets added on click, I am storing the data in Array and validating the same as per guidelines. I am able to get errors in Network tab but these errors are not being shown in the page tab itself. I’ve been trying to troubleshoot this more than a day now but no success, any quick help would be greaetly appreciated.

Array in which I am storing values code in my BaseForm Component

public $previousJobs = [];

Validation Rules in BaseForm Component

private $validation_rules = [
    // I am not adding 1 to 7 here to save your time to quickly read it.
    8 => [
                'previousJobs.*.employer_name' => 'required_if:showForm,true|min:3',
                'previousJobs.*.last_working_date' => 'required_if:showForm,true|min:3',
                'previousJobs.*.previous_ctc' => 'required_if:showForm,true|min:1'
            ]
    ]

public function submit()
    {

        $rules = collect($this->validation_rules)->collapse()->toArray();
        $this->validate($rules);

if( $this->showForm === 'true' && !empty($this->previousJobs)) :

                foreach ($this->previousJobs as $k => $job) {
                    $previousJob = PreviousJob::create([
                        'employee_id' => $employee->id,
                        'employer_name' => $this->previousJobs[$k]['employer_name'],
                        'employer_address' => $this->previousJobs[$k]['employer_address'],
                        'last_working_date' => $this->previousJobs[$k]['last_working_date'],
                        'previous_ctc' => $this->previousJobs[$k]['previous_ctc'],
                        'gross_amount' => $this->previousJobs[$k]['gross_amount'],
                        'taxable_amount' => $this->previousJobs[$k]['taxable_amount'],
                        'tax_paid' => $this->previousJobs[$k]['tax_paid'],
                        'employee_providend_fund' => $this->previousJobs[$k]['employee_providend_fund'],
                        'employer_providend_fund' => $this->previousJobs[$k]['employer_providend_fund'],
                        'previous_professional_tax' => $this->previousJobs[$k]['previous_professional_tax']
                    ]);
                }
        endif;

$this->reset();
$this->resetValidation();
}

Here is the code shown in my Blade File

@foreach ( $addForm as $form )
    <div class="bg-gray-light p-4 my-3" wire:key="{{ $form }}">
        {{-- First Row --}}
        <div class="row">
            <div class="form-group col-4">
                <x-label class="font-weight-normal font-italic small" for="employer_name[]" :value="__('Employer Name')" />
                <x-input type="text" placeholder="E.g.:ABC Company" value="{{ old('employer_name[]') }}" wire:model.defer="previousJobs.{{ $form }}.employer_name" />
                <div wire:key="error_no_{{ $form }}">
                    @error('previousJobs.{{ $form }}.employer_name')
                        <span class="font-weight-normal font-italic small text-danger">{{ $message }}</span>
                        {{ dd($form) }}
                    @enderror
                </div>
            </div>
        </div>
    </div>
@endforeach

When validating this perticular functionality I am getting following error in console as well tried all googled solutions but no luck.

Uncaught TypeError: Cannot read property 'match' of null

Errors are being collected at network tab:

image
image2796×694 155 KB

Any help would be greatly appreciate, please let me know if you would like to see my full component and blade files to better understand the code.

Million Thanks,
Chetan