skip to Main Content

I’m using a Livewire component, why is it still showing "cannot be null" even though all fields in the form have been filled out? I want the data that I fill in the form to be inserted into the database.

Bayar View

            <form wire:submit.prevent="store">
                @csrf
              
                <div class="form-group">
                  <label for="namapenerima">Nama Lengkap :</label>
                  <input type="text" name="namapenerima" class="form-control" value="{{ Auth::user()->name }}" placeholder="Masukkan nama lengkap Anda" required>
                </div>
              
                <div class="form-group">
                  <label for="email">Email:</label>
                  <input type="email" name="email" class="form-control" value="{{ Auth::user()->email }}" placeholder="Masukkan alamat email Anda" required>
                </div>
              
                <div class="form-group">
                  <label for="phone">Nomor Telepon:</label>
                  <input type="number" name="phone" class="form-control" value="{{ Auth::user()->phonenumber }}" placeholder="Masukkan nomor telepon Anda" required>
                </div>
              
                <div class="form-group" style="margin-top: 20px">
                  <label for="alamat">Alamat Lengkap:</label>
                  <textarea name="alamat" class="form-control" placeholder="Masukkan alamat lengkap Anda" required></textarea>
                </div>
              
                <button type="submit" class="submit-pesan" style="margin-top: 20px">Pesan Sekarang</button>
              </form>

Bayar Component

<?php

namespace AppHttpLivewire;

use LivewireComponent;
use AppModelsOrder;
use AppModelsAlamat;
use IlluminateSupportFacadesAuth;

class Bayar extends Component
{
    public $snapToken;
    public $belanja;
    public $va_number, $gross_amount, $bank, $transaction_status, $deadline;
    public $namapenerima, $email, $phone, $alamat;

    public function mount($id)
    {
        if (!Auth::user()) {
            return redirect()->route('login');
        }

        // Set your Merchant Server Key
        MidtransConfig::$serverKey = 'SB-Mid-server-d8dGSfkiYcOsQ5Kqs8NCTNrs';
        // Set to Development/Sandbox Environment (default). Set to true for Production Environment (accept real transaction).
        MidtransConfig::$isProduction = false;
        // Set sanitization on (default)
        MidtransConfig::$isSanitized = true;
        // Set 3DS transaction for credit card to true
        MidtransConfig::$is3ds = true;

        if (isset($_GET['result_data'])) {

            $current_status         = json_decode($_GET['result_data'], true);
            $order_id               = $current_status['order_id'];
            $this->belanja          = Order::where('id', $order_id)->first();
            $this->belanja->status  = 2;
            $this->belanja->update();
        } else {
            //ambil data belanja
            $this->belanja = Order::find($id);
        }

        if (!empty($this->belanja)) {
            if ($this->belanja->status == 1) {
                $params = array(
                    'transaction_details' => array(
                        'order_id' => $this->belanja->id,
                        'gross_amount' => $this->belanja->total_harga,
                    ),
                    'customer_details' => array(
                        'first_name' => 'Tuan',
                        'last_name' => Auth::user()->name,
                        'email' => Auth::user()->email,
                        'phone' => Auth::user()->phonenumber,
                    ),
                );

                $this->snapToken = MidtransSnap::getSnapToken($params);
            } else if ($this->belanja->status == 2) {
                $status = MidtransTransaction::status($this->belanja->id);
                $status = json_decode(json_encode($status), true);
                //menampilkan status pembayaran
                $this->va_number            = $status['va_numbers'][0]['va_number'];
                $this->gross_amount         = $status['gross_amount'];
                $this->bank                 = $status['va_numbers'][0]['bank'];
                $this->transaction_status   = $status['transaction_status'];
                $transaction_time           = $status['transaction_time'];
                $this->deadline             = date('Y-m-d H:i:s', strtotime('+1 day', strtotime($transaction_time)));
            }
        }
    }

    public function store ()
    {
        Alamat::create([
            'namapenerima' => $this->namapenerima,
            'email' => $this->email,
            'phone' => $this->phone,
            'alamat' => $this->alamat,
        ]);
    }

    public function render()
    {
        return view('livewire.bayar')
            ->extends('layouts.product-layouts')->section('product');
    }
}

Models

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

class Alamat extends Model
{
    use HasFactory;
    protected $table = 'alamat';
    protected $fillable = [
        'namapenerima',
        'email',
        'phone',
        'alamat',
    ];
}

Database Schema

    public function up()
    {
        Schema::create('alamat', function (Blueprint $table) {
            $table->id();
            $table->string('namapenerima');
            $table->string('email');
            $table->string('phone');
            $table->string('alamat');
            $table->timestamps();
        });
    }

I want the data that I fill in the form to be inserted into the database.

2

Answers


  1. You need to use wire:model to "bind" (or "synchronize") the current value of some HTML element with a specific property in livewire component, such as:

    <input type="text" wire:model.defer="namapenerima" name="namapenerima" class="form-control" value="{{ Auth::user()->name }}" placeholder="Masukkan nama lengkap Anda" required>
    

    Reference: https://laravel-livewire.com/docs/2.x/properties#data-binding

    Login or Signup to reply.
  2. The values are not being received by the Livewire Class because you need to either bind them for example:

     <input wire:model="namapenerima" type="text" name="namapenerima" class="form-control">
    

    Second in your case since namapenerima is not a required field on the HTMl side you need to define a default value so it is not Null and doesn’t crash the code with the same error:

    class Bayar extends Component
    {
        public $snapToken;
        public $belanja;
        public $va_number, $gross_amount, $bank, $transaction_status, $deadline;
        public $namapenerima = "No Name";
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search