Unable to catch and throw Errors on Page

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();

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


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

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:

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,