Statik formlar uygulamanızın esnekliğini sınırlar; dinamik formlar sonsuz olasılıkları serbest bırakır. – Addy Osmani
<p>Dinamik formlar, uygulamanızın veri yapısına ve iş mantığına uygun olarak alanlar, doğrulama ve düzenleri otomatik olarak oluşturur. Yönetim panelleri, çok adımlı sihirbazlar veya kulüp yönetim sistemleri için yapılandırılabilir formlar oluşturuyorsanız, Laravel + Vue 3 Composition API, temiz ve ölçeklenebilir form deneyimleri için mükemmel bir yığındır.<br/>Bu kılavuz, gerçek dinamik formlar oluşturmanıza yardımcı olacaktır; JSON şemalardan render etme, gerçek zamanlı doğrulama yapma ve Laravel'in arka uç doğrulaması ile API uç noktaları ile sorunsuz bir entegrasyon sağlama konularında rehberlik edecektir.</p>
<h2>
<a name="key-takeaways" href="#key-takeaways"></a>
Ana Noktalar
</h2>
<ul>
<li>Form yapısını tanımlamak için Laravel arka ucundan JSON şema tanımlarını kullanın.</li>
<li>Reaktif alan yönetimi ve dinamik render için Vue 3 Composition API'den yararlanın.</li>
<li>Ön uç tekrarı olmadan gerçek zamanlı doğrulama için Laravel Precognition'ı uygulayın.</li>
<li>Karmaşık formların hızlı prototiplenmesi için Filament veya özel bileşenler kullanın.</li>
<li>Koşullu görünürlük ve çok adımlı sihirbazlar için hesaplanmış özellikler ile iç içe alanları yönetin.</li>
<li>Dinamik formlar, Laravel uygulamalarınızı esnek, sürdürülebilir ve kullanıcı dostu hale getirir.</li>
</ul>
<h2>
<a name="index" href="#index"></a>
İçindekiler
</h2>
<ol>
<li>Neden Dinamik Formlar Önemlidir?</li>
<li>Laravel + Vue 3 Dinamik Formlar Nasıl Çalışır?</li>
<li>Şemaya Dayalı ve Bileşen Temelli Formlar</li>
<li>Laravel + Vue 3'te Dinamik Formları Kurma</li>
<li>Laravel'den Form Şeması Oluşturma</li>
<li>Vue 3'te Reaktif Form Bileşenleri Oluşturma</li>
<li>Laravel Precognition ile Gerçek Zamanlı Doğrulama</li>
<li>Koşullu Alanlar ve İçiçe Formlar Yönetimi</li>
<li>İleri Düzey Desenler: Çok Adımlı Sihirbazlar</li>
<li>Kaçınılması Gereken Yaygın Hatalar</li>
<li>Sıkça Sorulan Sorular</li>
<li>İlginç Gerçekler ve İstatistikler</li>
<li>Sonuç</li>
</ol>
<h2>
<a name="1-why-dynamic-forms-matter" href="#1-why-dynamic-forms-matter"></a>
1. Neden Dinamik Formlar Önemlidir?
</h2>
<blockquote>
<p>"Statik formlar uygulamanızın esnekliğini sınırlar; dinamik formlar sonsuz olasılıkları serbest bırakır."</p>
</blockquote>
<p>Dinamik formlar, veri yapısına bağlı olarak UI oluşturur; hardcoded girişleri ortadan kaldırır ve aşağıdaki avantajları sağlar:</p>
<ol>
<li>Yönetim panelleri: Herhangi bir veritabanı şemasına veya kullanıcı izinlerine uyum sağlar.</li>
<li>Çok adımlı sihirbazlar: Esnek adımlarla karmaşık kulüp/etkinlik kayıtları yapar.</li>
<li>Yapılandırılabilir formlar: Farklı kullanıcı rolleri veya varlıklarla rol spesifik alanlar sunar.</li>
<li>Gerçek zamanlı doğrulama: Laravel arka uç kurallarıyla anında senkronize olur.</li>
<li>Hızlı prototipleme: Ön uç-arka uç koordinasyon gecikmeleri yoktur.</li>
<li>Laravel, model/migration'lardan form şemaları oluşturma konusunda mükemmeldir, Vue 3'ün Composition API'si ise reaktif alan yönetimini zahmetsiz hale getirir.</li>
</ol>
<h2>
<a name="2-how-laravel-vue-3-dynamic-forms-work" href="#2-how-laravel-vue-3-dynamic-forms-work"></a>
2. Laravel + Vue 3 Dinamik Formlar Nasıl Çalışır?
</h2>
<p>Dinamik formlar aşağıdakilere dayanır:</p>
<ul>
<li>Form Şeması: Alan türlerini, doğrulamayı, etiketleri, seçenekleri tanımlayan JSON.</li>
<li>Laravel Arka Ucu: Kontrolcüler, modeller/veritabanı yapısından şemaları üretir.</li>
<li>Vue 3 Ön Ucu: Composition API, alanları reaktif olarak v-model ile render eder.</li>
<li>Gerçek Zamanlı Doğrulama: Laravel Precognition veya API çağrılarıyla canlı geri bildirim.</li>
</ul>
<p>Örnek:<br/>// Laravel şema + başlangıç verisi döner.</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>return response()->json([
'schema' => $formSchema,
'data' => $modelData]);
import { ref, reactive, computed } from ‘vue’;
const formData = ref({});
const schema = ref([]);
const dynamicFields = computed(() =>
schema.value.map(field => ({
…field,
value: formData.value[field.name]
}))
);
<p>Vue 3'ün reaktifliği, şema değiştiğinde formun tamamının anında güncellenmesini sağlar.</p>
<h2>
<a name="3-schemadriven-vs-componentdriven-forms" href="#3-schemadriven-vs-componentdriven-forms"></a>
3. Şemaya Dayalı ve Bileşen Temelli Formlar
</h2>
<p>Şemaya dayalı formlar, veri modellerine veya kullanıcı rollerine göre sıkça değişen formlar için kurumsal uygulamalarda üstündür.</p>
<h2>
<a name="4-setting-up-dynamic-forms-in-laravel-vue" href="#4-setting-up-dynamic-forms-in-laravel-vue"></a>
4. Laravel + Vue'da Dinamik Formları Kurma
</h2>
<p>Laravel kurulumu:<br/>composer require filament/forms-component<br/>npm install vue@3 <a class="mentioned-user" href="https://dev.to/vue">@vue</a>/compiler-sfc axios<br/>Temel yapılandırma:<br/>Laravel rotaları JSON şeması + model verisi döner.<br/>Vue 3 uygulaması reaktif refs ile Composition API'yi kullanır.<br/>Inertia.js veya SPA kurulumu için sorunsuz entegrasyon.<br/>Temel rota yapısı:</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>Route::get('/forms/{model}', function($model) {
$schema = generateSchemaFromModel($model);
$data = getModelData($model);
return inertia('DynamicForm', compact('schema', 'data'));});
