-
-
Save spham/3736965d5596dd64c8a50cf4fe086087 to your computer and use it in GitHub Desktop.
Livewire multiform #livewire
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h3>User Details</h3> | |
@if (session()->has('message')) | |
<div class="alert alert-success"> | |
{{ session('message') }} | |
</div> | |
@endif | |
<form wire:submit.prevent="submit"> | |
<div> | |
@if($step == 0) | |
<div class="form-group"> | |
<label for="name">Name</label> | |
<input type="text" class="form-control" wire:model.lazy="name" placeholder="Name"> | |
@error('name')<small class="form-text text-danger">{{ $message }}</small>@enderror | |
</div> | |
@endif | |
@if($step ==1) | |
<div class="form-group"> | |
<label for="email">Email</label> | |
<input type="email" class="form-control" wire:model.lazy="email" placeholder="email"> | |
@error('email')<small class="form-text text-danger">{{ $message }}</small>@enderror | |
</div> | |
@endif | |
@if($step==2) | |
<div class="form-group"> | |
<label for="color">Favorite color</label> | |
<input type="text" class="form-control" wire:model.lazy="color" placeholder="Favorite color"> | |
@error('color')<small class="form-text text-danger">{{ $message }}</small>@enderror | |
</div> | |
@endif | |
@if($step > 2) | |
<div class="card"> | |
<div class="card-body"> | |
<h4 class="card-title">Thank you for information</h4> | |
<p class="card-text">Welcome to webdevmatics {{$this->customer->name}}. Happy learning and | |
Subscribe!</p> | |
<a href="/">Go to home</a> | |
</div> | |
</div> | |
@endif | |
</div> | |
<div class="mt-2"> | |
@if($step> 0 && $step<=2) | |
<button type="button" wire:click="decreaseStep" class="btn btn-secondary mr-3">Back</button> | |
@endif | |
@if($step <= 2) | |
<button type="submit" class="btn btn-success">Next</button> | |
@endif | |
</div> | |
</form> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Http\Livewire; | |
use App\Customer; | |
use Livewire\Component; | |
class Multiform extends Component | |
{ | |
public $name; | |
public $email; | |
public $color; | |
public $step; | |
public $customer; | |
private $stepActions = [ | |
'submit1', | |
'submit2', | |
'submit3', | |
]; | |
public function mount() | |
{ | |
$this->step = 0; | |
} | |
public function decreaseStep() | |
{ | |
$this->step--; | |
} | |
public function render() | |
{ | |
return view('livewire.multiform'); | |
} | |
public function submit() | |
{ | |
$action = $this->stepActions[$this->step]; | |
$this->$action(); | |
} | |
public function submit1() | |
{ | |
$this->validate([ | |
'name' => 'required|min:4', | |
]); | |
if ($this->customer) { | |
$this->customer= tap($this->customer)->update(['name' => $this->name]); | |
session()->flash('message', 'Customer successfully updated.'); | |
}else { | |
$this->customer = Customer::create(['name' => $this->name]); | |
session()->flash('message', 'Customer successfully created.'); | |
} | |
$this->step++; | |
} | |
public function submit2() | |
{ | |
$this->validate([ | |
'email' => 'email|required', | |
]); | |
$this->customer = tap($this->customer)->update(['email' => $this->email]); | |
$this->step++; | |
} | |
public function submit3() | |
{ | |
$this->validate([ | |
'color' => 'required', | |
]); | |
$this->customer = tap($this->customer)->update(['color' => $this->color]); | |
session()->flash('message', 'Wow! '. $this->customer->color .' is nice color '. $this->customer->name); | |
$this->step++; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment