Possible to Display Entered Data in Dynamically Created Fields? - php

Question

I am using Laravel 5.3.18 to build a form that allows the user to enter one or more dates. I am also using the HTML/Form library from the Laravel Collective along with a FormRequest object to validate the fields. My problem is when the user dynamically adds in more date inputs (via JavaScript) and submits the form, if it doesn't pass validation, the "dynamically" added data (and inputs) are not redisplayed on the form.
My question is: Does Laravel handle this use case? And if so, how can I make this work (or what am I doing wrong)? Your insights and help are much appreciated!
Here is the actual snippet of code that initially generates the date inputs:
#foreach ($eventDates as $index=>$eventDate)
<div class="form-group{{ $errors->has('eventDates.'.$index.'.start_datetime') ? ' has-error' : '' }}" id="{{ 'event_date_group_'.$index }}">
{!! Form::label('eventDates['.$index.'][start_datetime]', 'Event Dates (Day '.($index + 1).')', ['class' => 'col-md-4 control-label']) !!}
<div class="col-md-3">
{!! Form::text('eventDates['.$index.'][start_datetime]', $eventDate['start_datetime'], ['id' => 'start_datetime_'.$index, 'class' => 'datetimepicker form-control']) !!}
#if ($errors->has('eventDates.'.$index.'.start_datetime'))
<span class="help-block"><strong>{{ $errors->first('eventDates.'.$index.'.start_datetime') }}</strong></span>
#endif
</div>
</div>
#endforeach
which generates this:
<div class="form-group" id="event_date_group_0">
<label for="eventDates[0][start_datetime]" class="col-md-4 control-label">Event Dates (Day 1)</label>
<div class="col-md-3">
<input id="start_datetime_0" class="datetimepicker form-control" name="eventDates[0][start_datetime]" type="text">
</div>
</div>
So, if the user dynamically creates another date input, it will look as follows:
<div class="form-group" id="event_date_group_0">
<label for="eventDates[0][start_datetime]" class="col-md-4 control-label">Event Dates (Day 1)</label>
<div class="col-md-3">
<input id="start_datetime_0" class="datetimepicker form-control" name="eventDates[0][start_datetime]" type="text">
</div>
</div>
<div class="form-group" id="event_date_group_1">
<label for="eventDates[1][start_datetime]" class="col-md-4 control-label">Event Dates (Day 2)</label>
<div class="col-md-3">
<input id="start_datetime_1" class="datetimepicker form-control" name="eventDates[1][start_datetime]" type="text">
</div>
</div>
And here is part of my FormRequest object:
public function rules() {
return [
'name' => 'required|max:100',
'eventDates.*.start_datetime' => 'required',
'eventDates.*.end_datetime' => 'required',
...
];
}
public function messages() {
return [
'eventDates.*.start_datetime.required' => 'Start date/time is required.',
'eventDates.*.end_datetime.required' => 'End time is required.',
...
];
}
Lastly, the validation works. The error messages show up for the dates input. In fact, if I dynamically create the extra date inputs. Fill everything out but leave just the dynamic date inputs blank, the validation will fail and the form will redisplay but the dynamic inputs and data don't show up. I also put in the following debug statement in the template to see how many elements come back in the array and it always show just 1.
<p>Number of Dates: {{ count($eventDates) }}</p>