Form

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Submit form

Mặc dù có thể submit form HTML truyền thống với Inertia, cách này không được khuyến nghị vì sẽ làm tải lại toàn bộ trang. Thay vào đó, tốt hơn là chặn việc submit form rồi thực hiện request bằng Inertia.

<template>
    <form @submit.prevent="submit">
        <label for="first_name">First name:</label>
        <input id="first_name" v-model="form.first_name" />
        <label for="last_name">Last name:</label>
        <input id="last_name" v-model="form.last_name" />
        <label for="email">Email:</label>
        <input id="email" v-model="form.email" />
        <button type="submit">Submit</button>
    </form>
</template>

<script>
import { router } from '@inertiajs/vue2'

export default {
    data() {
        return {
            form: {
                first_name: null,
                last_name: null,
                email: null,
            },
        }
    },
    methods: {
        submit() {
            router.post('/users', this.form)
        },
    },
}
</script>

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

const form = reactive({
    first_name: null,
    last_name: null,
    email: null,
})

function submit() {
    router.post('/users', form)
}
</script>

<template>
    <form @submit.prevent="submit">
        <label for="first_name">First name:</label>
        <input id="first_name" v-model="form.first_name" />
        <label for="last_name">Last name:</label>
        <input id="last_name" v-model="form.last_name" />
        <label for="email">Email:</label>
        <input id="email" v-model="form.email" />
        <button type="submit">Submit</button>
    </form>
</template>

import { useState } from 'react'
import { router } from '@inertiajs/react'

export default function Edit() {
    const [values, setValues] = useState({
        first_name: "",
        last_name: "",
        email: "",
    })

    function handleChange(e) {
        const key = e.target.id;
        const value = e.target.value
        setValues(values => ({
                ...values,
                [key]: value,
        }))
    }

    function handleSubmit(e) {
        e.preventDefault()
        router.post('/users', values)
    }

    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="first_name">First name:</label>
            <input id="first_name" value={values.first_name} onChange={handleChange} />
            <label htmlFor="last_name">Last name:</label>
            <input id="last_name" value={values.last_name} onChange={handleChange} />
            <label htmlFor="email">Email:</label>
            <input id="email" value={values.email} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    )
}

<script>
    import { router } from '@inertiajs/svelte'

    let values = {
        first_name: null,
        last_name: null,
        email: null,
    }

    function handleSubmit() {
        router.post('/users', values)
    }
</script>

<form on:submit|preventDefault={handleSubmit}>
    <label for="first_name">First name:</label>
    <input id="first_name" bind:value={values.first_name}>

    <label for="last_name">Last name:</label>
    <input id="last_name" bind:value={values.last_name}>

    <label for="email">Email:</label>
    <input id="email" bind:value={values.email}>

    <button type="submit">Submit</button>
</form>

Như bạn có thể đã nhận thấy trong ví dụ trên, khi dùng Inertia, thông thường bạn không cần kiểm tra response của form ở phía client như khi tự thực hiện request XHR / fetch. Thay vào đó, route / controller phía máy chủ thường trả về một response redirect. Và tất nhiên, không có gì ngăn bạn redirect người dùng quay lại đúng trang trước đó. Với cách tiếp cận này, việc xử lý submit form trong Inertia rất giống xử lý submit form HTML truyền thống.

class UsersController extends Controller
{
        public function index()
        {
                return Inertia::render('Users/Index', [
                    'users' => User::all(),
                ]);
        }

        public function store(Request $request)
        {
                User::create($request->validate([
                    'first_name' => ['required', 'max:50'],
                    'last_name' => ['required', 'max:50'],
                    'email' => ['required', 'max:50', 'email'],
                ]));

                return to_route('users.index');
        }
}

Validation phía máy chủ

Xử lý lỗi validation phía máy chủ trong Inertia hơi khác so với xử lý lỗi từ request XHR / fetch thủ công. Khi thực hiện request XHR / fetch, bạn thường kiểm tra response có status code 422 rồi tự cập nhật state lỗi của form. Tuy nhiên, khi dùng Inertia, máy chủ không bao giờ trả response 422. Thay vào đó, như ví dụ trên, route / controller thường trả về response redirect — tương tự một lần submit form tải toàn bộ trang truyền thống. Để tìm hiểu đầy đủ về cách xử lý và hiển thị lỗi validation với Inertia, hãy xem tài liệu validation.

Form helper

Vì làm việc với form là nhu cầu rất phổ biến, Inertia cung cấp form helper nhằm giảm lượng boilerplate code cần thiết khi xử lý các lần submit form thông thường.

<template>
    <form @submit.prevent="form.post('/login')">
        <!-- email -->
        <input type="text" v-model="form.email">
        <div v-if="form.errors.email">{{ form.errors.email }}</div>
        <!-- password -->
        <input type="password" v-model="form.password">
        <div v-if="form.errors.password">{{ form.errors.password }}</div>
        <!-- remember me -->
        <input type="checkbox" v-model="form.remember"> Remember Me
        <!-- submit -->
        <button type="submit" :disabled="form.processing">Login</button>
    </form>
</template>

<script>
import { useForm } from '@inertiajs/vue2'

export default {
    data() {
        return {
            form: useForm({
                email: null,
                password: null,
                remember: false,
            }),
        }
    },
}
</script>

<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
    email: null,
    password: null,
    remember: false,
})
</script>

<template>
    <form @submit.prevent="form.post('/login')">
        <!-- email -->
        <input type="text" v-model="form.email">
        <div v-if="form.errors.email">{{ form.errors.email }}</div>
        <!-- password -->
        <input type="password" v-model="form.password">
        <div v-if="form.errors.password">{{ form.errors.password }}</div>
        <!-- remember me -->
        <input type="checkbox" v-model="form.remember"> Remember Me
        <!-- submit -->
        <button type="submit" :disabled="form.processing">Login</button>
    </form>
</template>

import { useForm } from '@inertiajs/react'

const { data, setData, post, processing, errors } = useForm({
    email: '',
    password: '',
    remember: false,
})

function submit(e) {
    e.preventDefault()
    post('/login')
}

return (
    <form onSubmit={submit}>
        <input type="text" value={data.email} onChange={e => setData('email', e.target.value)} />
        {errors.email && <div>{errors.email}</div>}
        <input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
        {errors.password && <div>{errors.password}</div>}
        <input type="checkbox" checked={data.remember} onChange={e => setData('remember', e.target.checked)} /> Remember Me
        <button type="submit" disabled={processing}>Login</button>
    </form>
)

<script>
import { useForm } from '@inertiajs/svelte'

let form = useForm({
    email: null,
    password: null,
    remember: false,
})

function submit() {
    $form.post('/login')
}
</script>

<form on:submit|preventDefault={submit}>
    <input type="text" bind:value={$form.email} />
    {#if $form.errors.email}
        <div class="form-error">{$form.errors.email}</div>
    {/if}
    <input type="password" bind:value={$form.password} />
    {#if $form.errors.password}
        <div class="form-error">{$form.errors.password}</div>
    {/if}
    <input type="checkbox" bind:checked={$form.remember} /> Remember Me
    <button type="submit" disabled={$form.processing}>Submit</button>
</form>

Để submit form, bạn có thể dùng các phương thức get, post, put, patch và delete.

form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)

form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)

const { submit, get, post, put, patch, delete: destroy } = useForm({ ... })

submit(method, url, options)
get(url, options)
post(url, options)
put(url, options)
patch(url, options)
destroy(url, options)

$form.submit(method, url, options)
$form.get(url, options)
$form.post(url, options)
$form.put(url, options)
$form.patch(url, options)
$form.delete(url, options)

Các phương thức submit hỗ trợ mọi tùy chọn visit thông thường như preserveState, preserveScroll và callback sự kiện; các callback này hữu ích để thực hiện tác vụ sau khi submit form thành công. Ví dụ, bạn có thể dùng callback onSuccess để reset input về trạng thái ban đầu.

form.post('/profile', {
    preserveScroll: true,
    onSuccess: () => form.reset('password'),
})

form.post('/profile', {
    preserveScroll: true,
    onSuccess: () => form.reset('password'),
})

const { post, reset } = useForm({ ... })

post('/profile', {
    preserveScroll: true,
    onSuccess: () => reset('password'),
})

$form.post('/profile', {
    preserveScroll: true,
    onSuccess: () => $form.reset('password'),
})

Nếu cần thay đổi dữ liệu form trước khi gửi đến máy chủ, bạn có thể thực hiện thông qua phương thức transform().

form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')

form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')

const { transform } = useForm({ ... })

transform((data) => ({
    ...data,
    remember: data.remember ? 'on' : '',
}))

$form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')

Bạn có thể dùng thuộc tính processing để theo dõi form có đang được submit hay không. Điều này hữu ích để ngăn submit hai lần bằng cách disable nút submit.

<button type="submit" :disabled="form.processing">Submit</button>

<button type="submit" :disabled="form.processing">Submit</button>

const { processing } = useForm({ ... })

<button type="submit" disabled={processing}>Submit</button>

<button type="submit" disabled={$form.processing}>Submit</button>

Nếu form đang tải file lên, sự kiện tiến trình hiện tại có sẵn thông qua thuộc tính progress, giúp bạn dễ dàng hiển thị tiến độ tải lên.

<progress v-if="form.progress" :value="form.progress.percentage" max="100">
    {{ form.progress.percentage }}%
</progress>

<progress v-if="form.progress" :value="form.progress.percentage" max="100">
    {{ form.progress.percentage }}%
</progress>

const { progress } = useForm({ ... })

{progress && (
    <progress value={progress.percentage} max="100">
        {progress.percentage}%
    </progress>
)}

{#if $form.progress}
    <progress value={$form.progress.percentage} max="100">
        {$form.progress.percentage}%
    </progress>
{/if}

Nếu có lỗi validation của form, chúng có sẵn thông qua thuộc tính errors. Khi xây dựng ứng dụng Inertia dùng Laravel, lỗi form sẽ tự động được điền khi ứng dụng ném ra instance ValidationException, chẳng hạn khi dùng {'$request->validate()'}.

<div v-if="form.errors.email">{{ form.errors.email }}</div>

<div v-if="form.errors.email">{{ form.errors.email }}</div>

const { errors } = useForm({ ... })

{errors.email && <div>{errors.email}</div>}

{#if $form.errors.email}
    <div>{$form.errors.email}</div>
{/if}

Để tìm hiểu kỹ hơn về validation và lỗi của form, hãy xem tài liệu validation. Để xác định form có lỗi hay không, bạn có thể dùng thuộc tính hasErrors. Để xóa lỗi form, dùng phương thức clearErrors().

// Clear all errors...
form.clearErrors()

// Clear errors for specific fields...
form.clearErrors('field', 'anotherfield')

// Clear all errors...
form.clearErrors()

// Clear errors for specific fields...
form.clearErrors('field', 'anotherfield')

const { clearErrors } = useForm({ ... })

// Clear all errors...
clearErrors()

// Clear errors for specific fields...
clearErrors('field', 'anotherfield')

// Clear all errors...
$form.clearErrors()

// Clear errors for specific fields...
$form.clearErrors('field', 'anotherfield')

Nếu sử dụng thư viện validation input phía client hoặc tự validation phía client, bạn có thể tự đặt lỗi cho form bằng phương thức setErrors().

// Set a single error...
form.setError('field', 'Your error message.');

// Set multiple errors at once...
form.setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

// Set a single error...
form.setError('field', 'Your error message.');

// Set multiple errors at once...
form.setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

const { setError } = useForm({ ... })

// Set a single error...
setError('field', 'Your error message.');

// Set multiple errors at once...
setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

// Set a single error
$form.setError('field', 'Your error message.');

// Set multiple errors at once
$form.setError({
    foo: 'Your error message for the foo field.',
    bar: 'Some other error for the bar field.'
});

Khác với một lần submit form thực tế, props của trang không thay đổi khi bạn tự đặt lỗi trên một instance form. Khi form được submit thành công, thuộc tính wasSuccessful sẽ là true. Ngoài ra, form còn có thuộc tính recentlySuccessful, được đặt thành true trong hai giây sau một lần submit thành công. Bạn có thể dùng thuộc tính này để hiển thị thông báo thành công tạm thời. Để reset các giá trị của form về giá trị mặc định, bạn có thể dùng phương thức reset().

// Reset the form...
form.reset()

// Reset specific fields...
form.reset('field', 'anotherfield')

// Reset the form...
form.reset()

// Reset specific fields...
form.reset('field', 'anotherfield')

const { reset } = useForm({ ... })

// Reset the form...
reset()

// Reset specific fields...
reset('field', 'anotherfield')

// Reset the form...
$form.reset()

// Reset specific fields...
$form.reset('field', 'anotherfield')

Nếu các giá trị mặc định của form không còn phù hợp, bạn có thể dùng phương thức defaults() để cập nhật chúng. Sau đó, form sẽ được reset về đúng các giá trị này trong lần tiếp theo phương thức reset() được gọi.

// Set the form's current values as the new defaults...
form.defaults()

// Update the default value of a single field...
form.defaults('email', 'updated-default@example.com')

// Update the default value of multiple fields...
form.defaults({
    name: 'Updated Example',
    email: 'updated-default@example.com',
})

// Set the form's current values as the new defaults...
form.defaults()

// Update the default value of a single field...
form.defaults('email', 'updated-default@example.com')

// Update the default value of multiple fields...
form.defaults({
    name: 'Updated Example',
    email: 'updated-default@example.com',
})

const { setDefaults } = useForm({ ... })

// Set the form's current values as the new defaults...
setDefaults()

// Update the default value of a single field...
setDefaults('email', 'updated-default@example.com')

// Update the default value of multiple fields...
setDefaults({
    name: 'Updated Example',
    email: 'updated-default@example.com',
})

// Set the form's current values as the new defaults...
$form.defaults()

// Update the default value of a single field...
$form.defaults('email', 'updated-default@example.com')

// Change the default value of multiple fields...
$form.defaults({
    name: 'Updated Example',
    email: 'updated-default@example.com',
})

Để xác định form có thay đổi nào hay không, bạn có thể dùng thuộc tính isDirty.

<div v-if="form.isDirty">There are unsaved form changes.</div>

<div v-if="form.isDirty">There are unsaved form changes.</div>

const { isDirty } = useForm({ ... })

{isDirty && <div>There are unsaved form changes.</div>}

{#if $form.isDirty}
    <div>There are unsaved form changes.</div>
{/if}

Để hủy một lần submit form, dùng phương thức cancel().

form.cancel()

form.cancel()

const { cancel } = useForm({ ... })

cancel()

$form.cancel()

Để yêu cầu Inertia lưu dữ liệu và lỗi của form vào history state, bạn có thể truyền một form key duy nhất làm đối số đầu tiên khi khởi tạo form.

import { useForm } from '@inertiajs/vue2'

form: useForm('CreateUser', data)
form: useForm(`EditUser:${this.user.id}\

import { useForm } from '@inertiajs/vue3'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

import { useForm } from '@inertiajs/react'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

import { useForm } from '@inertiajs/svelte'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}\

Tải file lên

Khi thực hiện request hoặc submit form có chứa file, Inertia sẽ tự động chuyển dữ liệu request thành object FormData. Để tìm hiểu kỹ hơn về tải file, hãy xem tài liệu tải file.

Submit bằng XHR / Fetch

Dùng Inertia để submit form phù hợp với phần lớn tình huống; tuy nhiên, nếu cần kiểm soát quá trình submit chi tiết hơn, bạn hoàn toàn có thể thực hiện request XHR hoặc fetch thuần bằng thư viện mình lựa chọn.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v1 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Nâng cao

Submit form

Validation phía máy chủ

Form helper

Tải file lên

Submit bằng XHR / Fetch

Tài liệu chính thức

​Submit form

​Validation phía máy chủ

​Form helper

​Tải file lên

​Submit bằng XHR / Fetch

​Tài liệu chính thức

Submit form

Validation phía máy chủ

Form helper

Tải file lên

Submit bằng XHR / Fetch

Tài liệu chính thức