Level 39
Use the session values.
Dec 20, 2020
8
Level 3
Livewire : repopulate fields in form from `old()` within components
I have a Livewire component containing an input field which is part of a form. I am using Livewire to suggest input if it exists in the database which would populate other input fields within that component. The entire form is not Livewire.
When the form is submitted, it triggers the store method in the controller (as traditionally done), where validation is performed, and if validation fails it would send the user back to the form to show the the old data for example value="{{old('field1')}}"
How do we pass the old() input values and repopulate the Livewire component input field if validation fails on form submit? Some of the input fields are nested Livewire components.
Level 3
Could you provide some example of how you would use it within Livewire component?
Level 39
Do you know how work session values?
Level 3
Yes but I am not understanding how that will help in getting the validation old() data into my Livewire component.
Level 39
For each field you need :
-
setup the session value with the old value
-
in your form set the default value with this session value
Level 3
I feel there must be a more elegant way to do this.
Level 1
If I understand correctly, upon validation failure your component receives the data back as an old() value and you would like to know how to repopulate the component with that. If this is the case see the following example on how to mount() the old() data when your page loads:
Lets say your view for your input would be something like:
<input type="text" name="inputData" wire:model.debounce.500ms="inputData">
Then your Component logic would be like so:
class SomeInputComponent extends Component
{
public $inputData;
public function render()
{
return view('livewire.add-source');
}
public function mount() {
if (old('inputData')) {
$this->inputData = old('inputData');
}
}
}
The mount function loads the old('inputData') into the component's $inputData which is then populated in the view linked by the wire:model.debounce.500ms="inputData".
I hope this helps.
8 likes
Level 3
Thank you this helps much more and is exactly what I was looking for.
Please or to participate in this conversation.