Search code examples
laraveltailwind-csslaravel-livewirelaravel-9

My laravel livewire create form keeps giving me errors


LONG POST WARNING

why isn't my form to create a new user not working? im using laravel 9 and livewire. This is my code:

this is the button from where i show the model to create a form:

<div class="py-4 space-y-4">
            <div class="flex justify-between px-2">
                <div class="w-1/4">
                    <x-jet-input  placeholder="search will go here"/>
                </div>
                <div>
                    <x-jet-button wire:click="create">New Skill</x-jet-button>
                </div>
            </div>
        </div>

This is the model that shows the form. this model is also used to edit a skill as per Caleb the livewire creator:

<form wire:submit.prevent="save">
        <x-jet-dialog-modal wire:model.defer="showEditModal">
            <x-slot name="title">Edit Skill</x-slot>

            <x-slot name="content">
                <div class="col-span-6 sm:col-span-4">
                    <x-jet-label for="name" value="{{ __('Skill name') }}" />
                    <select wire:model="editing.name"
                            id="name"
                            type="text"
                            class="mt-1 block w-full border-gray-300
                             focus:border-indigo-300 focus:ring
                              focus:ring-indigo-200 focus:ring-opacity-50
                               rounded-md shadow-sm">
                        @foreach(\App\Models\Skill::LANGUAGES as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach

                    </select>
                        <x-jet-input-error for="editing.name" class="mt-2" />
                        <x-jet-label for="years" value="{{ __('Years of experience') }}" class="mt-4"/>
                        <x-jet-input wire:model="editing.years" id="years" type="number"
                             min="{{\App\Models\Skill::MIN_YEARS_OF_EXPERIENCE}}"
                             max="{{\App\Models\Skill::MAX_YEARS_OF_EXPERIENCE}}"
                         class="mt-1 block w-full"
                         placeholder="Years of experience"/>
                        <x-jet-input-error for="editing.years" class="mt-2" />
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-jet-secondary-button wire:click="$set('showEditModal', false)" class="mr-2">Cancel</x-jet-secondary-button>
                <x-jet-button type="submit">Save</x-jet-button>
            </x-slot>
        </x-jet-dialog-modal>
    </form>

And this is my livewire component:

<?php

namespace App\Http\Livewire;

use App\Models\Skill;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;


class Skills extends Component
{
    public $name ='';
    public $showEditModal = false;
    public Skill $editing;

    public function rules()
    {
        return [
            'editing.name' => 'required|in:'.collect(Skill::LANGUAGES)->keys()->implode(','),
            'editing.years' => 'required|numeric|between:' . Skill::MIN_YEARS_OF_EXPERIENCE . ',' . Skill::MAX_YEARS_OF_EXPERIENCE,
        ];
    }

    public function render()
    {
        return view('livewire.skills', [
            'skills' => Skill::where('user_id', auth()->id())->get(),
        ]);
    }

    public function mount(){
        $this->editing = $this->makeBlankSkill();
    }

    public function makeBlankSkill(){
        return Skill::make([
         'name' => 'javascript', 
         'user_id' => auth()->user()->id,
        ]);
    }

    public function create(){
        if ($this->editing->getKey()) $this->editing = $this->makeBlankSkill();
        $this->showEditModal = true;
    }

    public function edit(Skill $skill) {
        if ($this->editing->isNot($skill)) $this->editing = $skill;
        $this->showEditModal = true;
    }

    public function save()
    {
        $this->validate();
        $this->editing->save();
        $this->showEditModal = false;
    }
}

I keep getting SQLSTATE[HY000]: General error: 1364 Field 'user_id' doesn't have a default value and i dont know why.

This is my modal:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Skill extends Model
{
    use HasFactory;
    const DEFAULT_OPTION = 'Please select a skill';

    const LANGUAGES = [
        'javascript' => 'JavaScript',
        'php' => 'PHP',
        'python' => 'Python',
        'java' => 'Java',
        'c#' => 'C#',
        'c++' => 'C++',
        'ruby' => 'Ruby',
        'swift' => 'Swift',
        'typescript' => 'TypeScript',
        'rust' => 'Rust',
        'go' => 'Go',
        'kotlin' => 'Kotlin',
        'scala' => 'Scala',
        'dart' => 'Dart',
        'r' => 'R',
        'perl' => 'Perl',
        'elixir' => 'Elixir',
        'clojure' => 'Clojure',
        'haskell' => 'Haskell',
        'erlang' => 'Erlang',
        'lisp' => 'Lisp',
        'sql' => 'SQL',
        'bash' => 'Bash',
        'laravel' => 'Laravel',
        'symfony' => 'Symfony',
        'codeigniter' => 'CodeIgniter',
        'yii' => 'Yii',
        'zend' => 'Zend',
        'cakephp' => 'CakePHP',
        'fuelphp' => 'FuelPHP',
        'slim' => 'Slim',
        'lumen' => 'Lumen',
        'phalcon' => 'Phalcon',
        'silex' => 'Silex',
        'express' => 'Express',
        'koa' => 'Koa',
        'hapi' => 'Hapi',
        'meteor' => 'Meteor',
        'angular' => 'Angular',
        'ember' => 'Ember',
        'react' => 'React',
        'vue' => 'Vue',
        'backbone' => 'Backbone',
        'd3' => 'D3',
        'threejs' => 'Three.js',
        ];

    const MIN_YEARS_OF_EXPERIENCE = 1;
    const MAX_YEARS_OF_EXPERIENCE = 50;

    protected $fillable = [
        'name', 'user_id', 'years'
    ];

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Any help is greatly appriceated

I've done all there is to do.At least i hope. I've added the

$illable

array ive set the

'user_id' => auth()->user()->id,

Not sure what else im missing


Solution

  •     public function save()
    {
        $this->validate();
        $user = auth()->user();
        $this->editing->user_id = $user->id;
        $this->editing->save();
        $this->showEditModal = false;
    }
    

    This was the answer for me