Komponen Input

Parameter untuk penggunakan komponen input

berikut adalah opsi dan requirement untuk penggunaan komponen input

// Contoh penggunaan komponen input
<x-input 
    type="text"
    label="Name"
    id="textName"
    width="3" 
    name="name" 
    placeholder="Max 200" 
    required 
    value="{{@$results->name}}"
/>

---

1. label

<x-input 
    label="Name"
    ...
/>

variable attribut label required, dan harus ada. Fungsinya untuk label sebuah input. jika tidak diperlukan sebuah label maka isi attribute tersebut "". contoh label="".

---

2. id

<x-input 
    ...
    id="textName" 
    ...
/>

variable attribut id sifatnya opsional, tapi sangat berguna jika membutuhkan manipulasi dom dengan js/jquery. misalnya akan menggunakan type="date" yang akan menggunakan library datepicker, maka attribut komponen id ini sangat berguna

---

3. width

<x-input 
    ...
    width="3" 
    ...
/>

width ini menentukan nilai grid dalam bootstrap untuk labelnya. misal width 3, maka untuk label = 3 grid dan untuk input otomatis = 9 grid (dari total 12 grid). namun jika width=12, maka label=12 dan input 12.

---

3. name

<x-input 
    ...
    name="namaInputan" 
    ...
/>

name ini nantinya akan di parsing ke elemen input sebagai value dari attribute name dan juga sebagai value dari attribute id untuk elemen span

Elemen span digunakan untuk menampilkan pesan error

---

4. placeholder

<x-input 
    ...
    placeholder="Maksimal 200 karakter" 
    ...
/>

digunakan sebagai teks placeholdernya

---

5. required

<x-input 
    ...
    required 
    ...
/>

jika ditambahkan required, maka inputan tersebut akan di assign sebagai inputan required (penambahan icon asterisk pojok kiri atas di inputan). namun hanya di tampilan view saja.

meskipun sudah ditambah attribute required, tetap harus dilakukan pengecekan/validasi juga di sisi backend

---

6. type

<x-input 
    ...
    type="text" 
    ...
/>

sifatnya opsional, kalau tidak ditambahkan maka akan otomatis jadi tipe text. type ini sama halnya sebagai isian attribute input biasanya. isinya bisa text, number atau date.

jika type date yang membutuhkan library datepicker, ada pembahasan khusus untuk penggunaan library ini.

---

Ini kalau mau copas

<x-input label="Name" width="3" name="name" placeholder="Max 200" required value="{{@$results->name}}"/>

Berikut adalah pre-build componen input yang dipanggil dari kode diatas yang berada di folder components

<div class="form-group row {{$required ?? ''}}">
    @if(isset($label))
        <label class="col-md-{{$width}} control-label">{{$label}}</label>
    @endif

    <div class="col-md-{{(12-$width) > 0? 12-$width : 12}}">
        <input id="{{$id ?? 'input-string'}}" name="{{$name}}" class="form-control" placeholder="{{$placeholder ?? ''}}" type="{{ @$type ? @$type : 'text'}}"
               {{$required ?? ''}} value="{{$value ?? ''}}">
        <span id="{{$name}}" class="text-danger" data-label="alert"></span>
    </div>
</div>

Penting !!! jangan update komponen yang sudah ada, jika sangat diperlukan untuk menambah dynamic atribut pastikan pakai variable yang nullable / tambahkan pengecekan isset