How to make a form validation in InertiaJS

Question

I am follow this Link for a inertiaJS tutorial. BTW I'm using laravel 8

I have this image below from my webpage. I don't know why I don't have a page>errors in picture given. Is there any other way to validate a form other than the link that I provided?.

I commented out the page.error in my HTML because it causes me an error Error in render: "TypeError: Cannot read property 'email' of undefined" because of my Page.Error is an empty object.

Update: Code for my controller

Script Code

<script>
import Layout from "../../Shared/Layout";
export default {
components: {
   Layout,
},
data() {
return {
  lead: {
    name: "",
    email: "",
    phone: "",
    dob: "",
    interested_package: "",
  },
};
},
methods: {
async handleSubmit() {
  let res = await this.$inertia.post("/leads/save", this.lead);
  },
  },
};
</script>

App Service Provider

   public function boot()
{
    //
    Schema::defaultStringLength(255);
    Inertia::share([
        'errors' => function () {
            return Session::get('errors')
                ? Session::get('errors')->getBag('default')->getMessage()
                :  (object)[];
        }
    ]);

    Inertia::share('flash', function () {
        return [
            'message' => Session::get('message'),
            'success' => Session::get('success'),
            'error' => Session::get('error'),
        ];
    });
}

Answer 1

To access the email error, context needs to be added via the this keyword ie. this.$page.props.errors.email .

Answer 2

Hey i think you are not sharing error bag in Controller that is why is empty,to solve this, go to your AppServiceProvider and add this code.

  Inertia::share([
    'errors' => function () {
        return Session::get('errors')
            ? Session::get('errors')->getBag('default')->getMessages()
            : (object) [];
    },
]);