FormArray ve Dinamik Alanlar
Çalışma zamanında form denetimleri ekleyip kaldırın
FormArray ve Dinamik Alanlar, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Dinamik Alan Kümeleri
Bazı formlarda telefon numaraları veya satır öğeleri listesi gibi değişken sayıda alan bulunur. FormArray, sıralı ve büyütülebilir bir denetim koleksiyonunu yönetir.
FormArray Oluşturma
Bir FormArray, denetimlerden veya gruplardan oluşan bir dizi tutar.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Bir FormGroup İçinde
Diziyi bir üst gruba yerleştirerek bütün form değerinin parçası olmasını sağlayın.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Denetim Ekleme
Yeni bir denetimi dinamik olarak sona eklemek için push çağrısını kullanın.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Denetimleri Kaldırma
Belirli bir denetimi silmek için removeAt(index) kullanın.
removePhone(i: number) {
this.phones.removeAt(i);
}@for ile Görüntüleme
Şablonda dizinin denetimleri arasında yineleyin ve her birini formControlName ile dizini üzerinden bağlayın.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>formArrayName Yönergesi
formArrayName, bir şablon bloğunu diziye bağlar; içteki formControlName ise sayısal dizini kullanır.
Grup Dizileri
Daha kapsamlı öğeler için dizi içinde FormGroup nesneleri tutun; örneğin her iletişim kişisi bir ad ve numara içerebilir.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Grup Öğelerini Görüntüleme
Dizideki her grup için dizinle birlikte formGroupName kullanın.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Değeri Okuma
Dizi değeri, mevcut denetimleri sırasıyla yansıtan normal bir dizidir.
const list = this.phones.value; // string[]Diziyi Temizleme
clear(), dinamik bir bölümü sıfırlarken kullanışlı olacak şekilde tüm denetimleri tek seferde kaldırır.
this.phones.clear();Hızlı Kontrol
FormArray kavramını anlayıp anlamadığınızı test edin.
Özet
FormArray'in push, removeAt ve clear kullanarak dinamik ve sıralı bir denetim veya grup koleksiyonunu yönettiğini; bu koleksiyonun formArrayName ile birlikte dizinli formControlName/formGroupName kullanılarak görüntülendiğini öğrendiniz.
Sıkça Sorulan Sorular
“FormArray ve Dinamik Alanlar” dersi ücretsiz mi?
Evet — “FormArray ve Dinamik Alanlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“FormArray ve Dinamik Alanlar” dersinde ne öğreneceğim?
Çalışma zamanında form denetimleri ekleyip kaldırın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“FormArray ve Dinamik Alanlar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tür Denetimli Reaktif Formlar
- FormArray ve Dinamik Alanlar
- Eş Zamanlı Olmayan Doğrulayıcılar
- FormBuilder Kalıpları