Good morning, help me please. I'm creating a dynamic form in laravel livewire.
the problem is, when I try to add a new form (option or Opsi 2) by clicking the "Tambah Opsi" button, the input form in "Option or Opsi 1" will disappear, only the label will appear. How to solve this problem? so that, when adding a new form by clicking the "Tambah Opsi" button, the input form in option or opsi 1 will also still be displayed.
PengajuanMagang.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Validator;
use App\Models\{Magang, Peserta};
use App\Notifications\PengajuanMagang as NotificationsPengajuanMagang;
class PengajuanMagang extends Component
{
public $nama, $email, $nama_perusahaan, $alamat_perusahaan, $telp_perusahaan, $email_perusahaan, $contact_person;
public $updateMode = False;
public $inputs = [];
public $i = 1;
protected $rules = [
'email' => 'required|exists:pesertas,email',
'nama_perusahaan.0' => 'required',
'alamat_perusahaan.0' => 'required',
'telp_perusahaan.0' => 'required',
'email_perusahaan.0' => 'required'
];
protected $messages = [
'email.required' => 'Email tidak boleh kosong.',
'email.exists' => 'Alamat email tidak terdaftar di program kami.',
'nama_perusahaan.0.required' => 'Nama perusahaan tidak boleh kosong.',
'alamat_perusahaan.0.required' => 'Alamat perusahaan tidak boleh kosong.',
'telp_perusahaan.0.required' => 'Telephone perusahaan tidak boleh kosong.',
'email_perusahaan.0.required' => 'Email perusahaan tidak boleh kosong.'
];
public function add($i)
{
$i = $i 1;
$this->i = $i;
array_push($this->inputs ,$i);
}
private function resetInputFields(){
$this->nama = '';
$this->email = '';
$this->nama_perusahaan = '';
$this->alamat_perusahaan = '';
$this->telp_perusahaan = '';
$this->email_perusahaan = '';
$this->contact_person = '';
$this->i = 1;
}
public function save()
{
$this->validate();
$peserta = Peserta::where('email',$this->email)->first();
foreach ($this->nama_perusahaan as $key => $value) {
Magang::create([
'peserta_id' => $peserta->id,
'nama_perusahaan' => $this->nama_perusahaan[$key],
'alamat_perusahaan' => $this->alamat_perusahaan[$key],
'telp_perusahaan' => $this->telp_perusahaan[$key],
'email_perusahaan' => $this->email_perusahaan[$key],
'contact_person' => $this->contact_person[$key],
'status' => 0
]);
}
$this->inputs = [];
$this->resetInputFields();
$peserta->notify(new NotificationsPengajuanMagang($peserta));
$this->alert('success', 'Data Berhasil Terkirim', [
'position' => 'center',
'timer' => 3000,
'toast' => false,
'text' => 'Kami Akan Segera Melakukan Pemeriksaan Data',
'confirmButtonText' => 'Ok',
'cancelButtonText' => 'Cancel',
'showCancelButton' => false,
'showConfirmButton' => false,
]);
}
public function render()
{
return view('livewire.pengajuan-magang')
->extends('layouts.front')
->section('content');
}
}
form.blade.php
<div class="card rounded-3">
<div class="card-body">
<div class="alert alert-primary" role="alert">
Silakan usulkan 3 nama Industry terdekat (bisa Hotel, Resto, Coffee Shop, atau Bakery Shop) yang ingin kamu jadikan tempat Practical Learning.
</div>
<form class="row g-3" wire:submit.prevent="save">
@csrf
<label><strong>Pengajuan Magang</strong></label>
<div class="col-md-6">
<label for="nama" class="form-label">Nama</label>
<input type="text" wire:model="nama" class="form-control @error('nama') is-invalid @enderror" id="nama" placeholder="Nama Kamu">
@error('nama')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" wire:model="email" class="form-control @error('email') is-invalid @enderror" id="email" aria-describedby="email" placeholder="Email Kamu">
@error('email')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
<div id="email" class="form-text"><span class="text-danger">*</span> Masukkan alamat email yang kamu gunakan saat mendaftar program.</div>
</div>
<label><strong>Opsi 1</strong></label>
<div class="col-md-6">
<label for="nama_perusahaan" class="form-label">Nama Perusahaan</label>
<input type="text" wire:model="nama_perusahaan.0" class="form-control @error('nama_perusahaan.0') is-invalid @enderror" id="nama_perusahaan" placeholder="Nama Perusahaan">
@error('nama_perusahaan.0')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="col-md-6">
<label for="telp_perusahaan" class="form-label">Telp Perusahaan</label>
<input type="text" wire:model="telp_perusahaan.0" class="form-control @error('telp_perusahaan.0') is-invalid @enderror" id="telp_perusahaan" placeholder="Telephone Perusahaan">
@error('telp_perusahaan.0')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="col-md-6">
<label for="email_perusahaan" class="form-label">Email Perusahaan</label>
<input type="email" wire:model="email_perusahaan.0" class="form-control @error('email_perusahaan.0') is-invalid @enderror" id="email_perusahaan" placeholder="Email Perusahaan">
@error('email_perusahaan.0')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="col-md-6">
<label for="contact_person" class="form-label">Contact Person</label>
<input type="text" wire:model="contact_person.0" class="form-control @error('contact_person.0') is-invalid @enderror" id="contact_person" placeholder="Contact Person">
@error('contact_person.0')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="col-12">
<label for="alamat_perusahaan" class="form-label">Alamat Perusahaan</label>
<input type="text" wire:model="alamat_perusahaan.0" class="form-control @error('alamat_perusahaan.0') is-invalid @enderror" id="alamat_perusahaan" placeholder="Contoh: Kec. Pakem, Kab. Sleman">
@error('alamat_perusahaan.0')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
@foreach ($inputs as $key => $value)
<hr>
<div class="d-flex mx-auto">
<label><strong>Opsi {{ $value }}</strong></label>
</div>
<div class="col-md-6">
<label for="nama_perusahaan" class="form-label">Nama Perusahaan</label>
<input type="text" wire:model="nama_perusahaan.{{ $value }}" hljs-built_in">error('nama_perusahaan.'.$value) is-invalid @enderror" id="nama_perusahaan" placeholder="Nama Perusahaan">
@error('nama_perusahaan.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
<div hljs-number">6">
<label for="telp_perusahaan" hljs-string">">Telp Perusahaan</label>
<input type="text" wire:model="telp_perusahaan.{{ $value }}" hljs-built_in">error('telp_perusahaan.'.$value) is-invalid @enderror" id="telp_perusahaan" placeholder="Telephone Perusahaan">
@error('telp_perusahaan.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
<div hljs-number">6">
<label for="email_perusahaan" hljs-string">">Email Perusahaan</label>
<input type="email" wire:model="email_perusahaan.{{ $value }}" hljs-built_in">error('email_perusahaan.'.$value) is-invalid @enderror" id="email_perusahaan" placeholder="Email Perusahaan">
@error('email_perusahaan.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
<div hljs-number">6">
<label for="contact_person" hljs-string">">Contact Person</label>
<input type="text" wire:model="contact_person.{{ $value }}" hljs-built_in">error('contact_person.'.$value) is-invalid @enderror" id="contact_person" placeholder="Contact Person">
@error('contact_person.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
<div hljs-number">12">
<label for="alamat_perusahaan" hljs-string">">Alamat Perusahaan</label>
<input type="text" wire:model="alamat_perusahaan.{{ $value }}" hljs-built_in">error('alamat_perusahaan.'.$value) is-invalid @enderror" id="alamat_perusahaan" placeholder="Contoh: Kec. Pakem, Kab. Sleman">
@error('alamat_perusahaan.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
@endforeach
<div>
<button hljs-string">" type="button" wire:click.prevent="add({{$i}})" {{ $i == 3 ? 'disabled' : '' }}>Tambah Opsi</button>
</div>
<div hljs-number">2">
<button hljs-string">" wire:target="save" wire:loading.attr="disabled">
<span wire:loading.remove wire:target="save">
Ajukan
</span>
<span wire:loading wire:target="save" hljs-string">">
<span hljs-string">" role="status" aria-hidden="true"></span>
Loading...
</span>
</button>
</div>
</form>
</div>
</div>
CodePudding user response：
wrap the foreach code into root div and define wire:key directive for it
@foreach ($inputs as $key => $value)
<hr>
<div wire:key="opsi-key-{{ $key }}" // or some unique identifier
<div class="d-flex mx-auto">
<label><strong>Opsi {{ $value }}</strong></label>
</div>
<div class="col-md-6">
<label for="nama_perusahaan" class="form-label">Nama Perusahaan</label>
<input type="text" wire:model="nama_perusahaan.{{ $value }}" hljs-built_in">error('nama_perusahaan.'.$value) is-invalid @enderror" id="nama_perusahaan" placeholder="Nama Perusahaan">
@error('nama_perusahaan.'.$value)
<div hljs-string">">
{{ $message }}
</div>
@enderror
</div>
//.......
</div>