{"id":34925,"date":"2025-11-23T18:31:12","date_gmt":"2025-11-23T15:31:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angular-v21-pratik-migrasyon-ve-signal-forms-rehberi\/"},"modified":"2025-11-23T18:31:12","modified_gmt":"2025-11-23T15:31:12","slug":"angular-v21-pratik-migrasyon-ve-signal-forms-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-v21-pratik-migrasyon-ve-signal-forms-rehberi\/","title":{"rendered":"Angular v21 – Pratik Migrasyon ve Signal Forms Rehberi"},"content":{"rendered":"

<\/p>\n

Modern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, verimlilik ve kullan\u0131c\u0131 deneyimi her zamankinden daha kritik. Angular v21, bu ihtiya\u00e7lar\u0131 kar\u015f\u0131lamak \u00fczere devrim niteli\u011finde yenilikler sunarken, \u00f6zellikle Signal Forms<\/strong> ile form y\u00f6netimini bamba\u015fka bir boyuta ta\u015f\u0131yor. Bu kapsaml\u0131 rehber, mevcut Angular projelerinizi v21’e sorunsuz bir \u015fekilde nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ve yeni Signal Forms API’sini usta bir \u015fekilde nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor, geli\u015ftirme s\u00fcrecinizi optimize etmeniz i\u00e7in pratik bilgiler sunuyor.<\/p>\n

Her Angular s\u00fcr\u00fcm\u00fcyle birlikte gelen yenilikler, geli\u015ftiricilere daha g\u00fc\u00e7l\u00fc, daha performansl\u0131 ve daha esnek uygulamalar olu\u015fturma imkan\u0131 sunar. Angular v21, bu gelene\u011fi s\u00fcrd\u00fcrerek, \u00f6zellikle Signal Forms<\/strong> ve geli\u015fmi\u015f reaktivite mekanizmalar\u0131 ile dikkat \u00e7ekiyor. Peki, projenizi v21’e ta\u015f\u0131mak neden bu kadar kritik? Cevap, sadece yeni \u00f6zelliklere eri\u015fimden ibaret de\u011fil; ayn\u0131 zamanda geli\u015ftirici deneyimini iyile\u015ftirmek, uygulama performans\u0131n\u0131 art\u0131rmak ve gelecekteki Angular g\u00fcncellemelerine daha kolay adapte olabilmek yat\u0131yor.<\/p>\n

\u00d6ncelikle, v21’in getirdi\u011fi performans iyile\u015ftirmelerini ele alal\u0131m. Angular tak\u0131m\u0131, \u00f6zellikle Change Detection mekanizmalar\u0131nda yap\u0131lan optimizasyonlarla, uygulamalar\u0131n daha az kaynak t\u00fcketerek daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 hedefliyor. Bu iyile\u015ftirmeler, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda bile fark edilir bir h\u0131z art\u0131\u015f\u0131 sa\u011flayabilir. \u00d6rne\u011fin, y\u00fczlerce bile\u015feni olan bir e-ticaret uygulamas\u0131nda, \u00fcr\u00fcn listelemelerinden sepet g\u00fcncellemelerine kadar her etkile\u015fimde daha ak\u0131c\u0131 bir deneyim sunulabilir. Ayr\u0131ca, v21 ile birlikte baz\u0131 eski ve daha az verimli API’lerin kullan\u0131m\u0131 sona erdirilebilir veya yerini daha modern alternatiflere b\u0131rakabilir. Bu durum, projenizin “teknik borcunu” azaltma ve daha g\u00fcncel standartlara uyum sa\u011flama f\u0131rsat\u0131 sunar.<\/p>\n

Geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, Signal Forms<\/strong> gibi yenilikler, form y\u00f6netimini \u00e7ok daha sezgisel ve hatas\u0131z hale getiriyor. Geleneksel reaktif formlarda kar\u015f\u0131la\u015f\u0131lan baz\u0131 zorluklar (\u00f6rne\u011fin, manuel abonelik y\u00f6netimi veya de\u011fi\u015fmezlik prensiplerini koruma ihtiyac\u0131), Signal Forms ile \u00f6nemli \u00f6l\u00e7\u00fcde hafifliyor. Bu, geli\u015ftiricilerin form mant\u0131\u011f\u0131n\u0131 yazmaya daha fazla odaklanmas\u0131n\u0131 ve hata ay\u0131klama s\u00fcre\u00e7lerini k\u0131saltmas\u0131n\u0131 sa\u011fl\u0131yor. Daha az boilerplate kod ve daha net bir veri ak\u0131\u015f\u0131, \u00f6zellikle b\u00fcy\u00fck ekiplerde kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131yor. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, \u00f6rne\u011fin bir kurumsal uygulaman\u0131n m\u00fc\u015fteri veri giri\u015f formlar\u0131nda, Signal Forms’un sa\u011flad\u0131\u011f\u0131 kolayl\u0131klar, hem geli\u015ftirme s\u00fcresini k\u0131saltacak hem de daha az hata i\u00e7eren formlar ortaya \u00e7\u0131karacakt\u0131r.<\/p>\n

Migrasyon stratejisi a\u00e7\u0131s\u0131ndan, Angular ekibi, mevcut projeleri yeni s\u00fcr\u00fcmlere ta\u015f\u0131ma s\u00fcrecini m\u00fcmk\u00fcn oldu\u011funca sorunsuz hale getirmeye \u00f6zen g\u00f6steriyor. ng update<\/code> komutu, \u00e7o\u011fu durumda otomatik olarak ba\u011f\u0131ml\u0131l\u0131klar\u0131 g\u00fcnceller ve baz\u0131 yayg\u0131n kod d\u00fczenlemelerini yapar. Ancak, \u00f6zellikle b\u00fcy\u00fck projelerde veya uzun s\u00fcredir g\u00fcncellenmemi\u015f uygulamalarda manuel m\u00fcdahaleler gerekebilir. Bu nedenle, migrasyon \u00f6ncesinde projenin mevcut durumunu, kullan\u0131lan \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneleri ve deprecated (kullan\u0131mdan kald\u0131r\u0131lm\u0131\u015f) API’leri dikkatlice analiz etmek \u00f6nemlidir. \u00d6rne\u011fin, Angular CLI’nin sundu\u011fu linting ara\u00e7lar\u0131 veya ng lint<\/code> komutlar\u0131, potansiyel uyumsuzluklar\u0131 veya eski kod yap\u0131lar\u0131n\u0131 tespit etmede yard\u0131mc\u0131 olabilir. Bir proje y\u00f6neticisinin bak\u0131\u015f a\u00e7\u0131s\u0131yla, v21’e ge\u00e7i\u015f, sadece yeni \u00f6zelliklere eri\u015fim de\u011fil, ayn\u0131 zamanda projenin genel sa\u011fl\u0131\u011f\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rma f\u0131rsat\u0131 olarak g\u00f6r\u00fclmelidir. Bu ge\u00e7i\u015f, uzun vadede bak\u0131m maliyetlerini d\u00fc\u015f\u00fcrecek ve uygulaman\u0131z\u0131n modern web standartlar\u0131na uyumunu sa\u011flayacakt\u0131r.<\/p>\n

Dolay\u0131s\u0131yla, Angular v21’e ge\u00e7i\u015f, sadece bir s\u00fcr\u00fcm g\u00fcncellemesi de\u011fil, ayn\u0131 zamanda projenizi gelece\u011fe haz\u0131rlayan stratejik bir ad\u0131md\u0131r. Sundu\u011fu performans art\u0131\u015flar\u0131, geli\u015ftirici dostu \u00f6zellikler ve modern web standartlar\u0131na uyum, bu ge\u00e7i\u015fi her Angular geli\u015ftiricisi ve projesi i\u00e7in vazge\u00e7ilmez k\u0131lmaktad\u0131r.<\/p>\n

Angular Signals Nedir ve Neden Geli\u015ftirildi? Temel Kavramlara Giri\u015f<\/h2>\n

Angular Signals, reaktif programlama paradigmas\u0131n\u0131 Angular ekosistemine daha derinlemesine entegre eden, bile\u015fenlerin durumunu y\u00f6netmek i\u00e7in yeni ve g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bu kavram, \u00f6zellikle uygulaman\u0131n veri ak\u0131\u015f\u0131n\u0131 ve de\u011fi\u015fim tespitini (Change Detection) optimize etme ihtiyac\u0131ndan do\u011fmu\u015ftur. Geleneksel Angular’da, Zone.js ve RxJS tabanl\u0131 Change Detection mekanizmas\u0131 g\u00fc\u00e7l\u00fc olsa da, bazen a\u015f\u0131r\u0131 kontroller nedeniyle performans darbo\u011fazlar\u0131na yol a\u00e7abilirdi. Signals, bu soruna daha gran\u00fcler ve hedefli bir yakla\u015f\u0131m getirerek, yaln\u0131zca ilgili verinin de\u011fi\u015fti\u011fi yerlerde g\u00fcncelleme yap\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n

Signals, temelde reaktif bir de\u011fer tutucusudur. Bir de\u011ferin zaman i\u00e7inde de\u011fi\u015fti\u011fini izlemenizi ve bu de\u011fi\u015fikliklere reaksiyon g\u00f6stermenizi sa\u011flar. En temel Signal t\u00fcr\u00fc, signal()<\/code> fonksiyonu ile olu\u015fturulur. Bu fonksiyon, bir ba\u015flang\u0131\u00e7 de\u011feri al\u0131r ve bu de\u011feri okumak i\u00e7in bir fonksiyon (.value<\/code>) ve de\u011fi\u015ftirmek i\u00e7in ba\u015fka bir fonksiyon (.set()<\/code> veya .update()<\/code>) d\u00f6nd\u00fcr\u00fcr. \u00d6rne\u011fin:<\/p>\n

\n  import { signal } from '@angular\/core';\n\n  const counter = signal(0); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0\n  console.log(counter.value); \/\/ 0 \u00e7\u0131kt\u0131s\u0131 verir\n\n  counter.set(5); \/\/ De\u011feri 5 olarak ayarlar\n  console.log(counter.value); \/\/ 5 \u00e7\u0131kt\u0131s\u0131 verir\n\n  counter.update(currentValue => currentValue + 1); \/\/ Mevcut de\u011feri art\u0131r\u0131r\n  console.log(counter.value); \/\/ 6 \u00e7\u0131kt\u0131s\u0131 verir\n<\/pre>\n
<\/code><\/p>\n
Burada counter<\/code> bir signal'd\u0131r. De\u011feri counter.value<\/code> ile okunur ve set<\/code> veya update<\/code> ile de\u011fi\u015ftirildi\u011finde, bu signal'\u0131 kullanan t\u00fcm ba\u011f\u0131ml\u0131 computed<\/code> veya effect<\/code> fonksiyonlar\u0131 otomatik olarak g\u00fcncellenir. \u0130\u015fte bu otomatik reaktivite, Signals'\u0131n temel g\u00fcc\u00fcd\u00fcr.<\/p>\n
\u0130ki ana yard\u0131mc\u0131 Signal t\u00fcr\u00fc daha vard\u0131r: computed()<\/code> ve effect()<\/code>.
\ncomputed()<\/code> fonksiyonu, bir veya daha fazla Signal'dan t\u00fcretilmi\u015f bir de\u011fer olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bu t\u00fcretilmi\u015f de\u011fer de kendi ba\u015f\u0131na bir Signal gibi davran\u0131r ve ba\u011f\u0131ml\u0131 oldu\u011fu Signal'lar de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131r. computed<\/code> de\u011ferler, \u00f6zellikle karma\u015f\u0131k hesaplamalar\u0131 \u00f6nbelle\u011fe almak ve yaln\u0131zca ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015ft\u0131rmak i\u00e7in idealdir. Bu, performans a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck avantajlar sa\u011flar. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnlerin toplam fiyat\u0131n\u0131 hesaplamak i\u00e7in kullan\u0131labilir:<\/p>\n
\n  import { signal, computed } from '@angular\/core';\n\n  const price = signal(10);\n  const quantity = signal(2);\n\n  const totalPrice = computed(() => price.value * quantity.value);\n  console.log(totalPrice.value); \/\/ 20 \u00e7\u0131kt\u0131s\u0131 verir\n\n  quantity.set(3); \/\/ quantity de\u011fi\u015fti\u011finde totalPrice otomatik olarak yeniden hesaplan\u0131r\n  console.log(totalPrice.value); \/\/ 30 \u00e7\u0131kt\u0131s\u0131 verir\n<\/pre>\n
<\/code><\/p>\n
effect()<\/code> fonksiyonu ise, bir veya daha fazla Signal'daki de\u011fi\u015fikliklere bir yan etki (side effect) olarak tepki vermek i\u00e7in kullan\u0131l\u0131r. Yan etkiler genellikle DOM g\u00fcncellemesi, API \u00e7a\u011fr\u0131s\u0131, loglama veya d\u0131\u015f sistemlerle etkile\u015fim gibi i\u015flemleri i\u00e7erir. effect<\/code> fonksiyonlar\u0131 bir kez \u00e7al\u0131\u015f\u0131r ve ba\u011f\u0131ml\u0131 olduklar\u0131 Signal'lar de\u011fi\u015fti\u011finde tekrar \u00e7al\u0131\u015f\u0131r. effect<\/code>'ler, Angular'\u0131n Change Detection d\u00f6ng\u00fcs\u00fc d\u0131\u015f\u0131nda \u00e7al\u0131\u015farak daha fazla kontrol ve performans sunar. Ancak, effect<\/code>'leri dikkatli kullanmak ve i\u00e7inde \u00e7ok karma\u015f\u0131k mant\u0131k y\u00fcr\u00fctmekten ka\u00e7\u0131nmak \u00f6nemlidir, \u00e7\u00fcnk\u00fc bu durum uygulaman\u0131n veri ak\u0131\u015f\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131rabilir.<\/p>\n
\n  import { signal, effect } from '@angular\/core';\n\n  const username = signal('Ali');\n\n  effect(() => {\n    console.log(Kullan\u0131c\u0131 ad\u0131 de\u011fi\u015fti: ${username.value}<\/code>);\n  });\n\n  username.set('Veli'); \/\/ Console'a \"Kullan\u0131c\u0131 ad\u0131 de\u011fi\u015fti: Veli\" yazar\n<\/pre>\n
<\/code><\/p>\n
\n
Uzman \u0130pucu: effect<\/code>'leri, bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc hook'lar\u0131na alternatif olarak, \u00f6zellikle bir Signal de\u011fi\u015fti\u011finde bir d\u0131\u015f sistemi g\u00fcncellemek veya bir DOM \u00f6\u011fesiyle do\u011frudan etkile\u015fim kurmak gibi senaryolarda kullanabilirsiniz. Ancak, effect<\/code>'lerin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n do\u011fru bir \u015fekilde y\u00f6netilmesi, sonsuz d\u00f6ng\u00fclerin \u00f6n\u00fcne ge\u00e7mek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<\/blockquote>\n
Signals'\u0131n geli\u015ftirilmesinin temel amac\u0131, Angular uygulamalar\u0131nda daha \u00f6ng\u00f6r\u00fclebilir, daha performansl\u0131 ve daha kolay bir durum y\u00f6netimi sa\u011flamakt\u0131r. Zone.js tabanl\u0131 Change Detection modelinde, her potansiyel de\u011fi\u015fiklik, genellikle t\u00fcm bile\u015fen a\u011fac\u0131n\u0131n kontrol edilmesine neden olabilir. Signals ile birlikte ise, Angular sadece ger\u00e7ekten etkilenen bile\u015fenleri ve ilgili k\u0131s\u0131mlar\u0131 yeniden render eder. Bu, \u00f6zellikle b\u00fcy\u00fck ve veri yo\u011fun uygulamalarda \u00f6nemli \u00f6l\u00e7\u00fcde performans art\u0131\u015f\u0131 demektir. Signals, reaktif programlaman\u0131n g\u00fcc\u00fcn\u00fc daha do\u011frudan ve Angular'a \u00f6zg\u00fc bir \u015fekilde sunarak, geli\u015ftiricilerin daha verimli kod yazmas\u0131na olanak tan\u0131r.<\/p>\n
Signal Forms ile Tan\u0131\u015fma: Neden Standart Formlardan Daha \u0130yidir?<\/h2>\n
Angular'\u0131n reaktif formlar\u0131, uzun s\u00fcredir form y\u00f6netimi i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir yap\u0131 sunmaktayd\u0131. Ancak, Signals'\u0131n Angular ekosistemine entegrasyonuyla birlikte, form y\u00f6netiminde de devrim niteli\u011finde yenilikler meydana geldi: Signal Forms<\/strong>. Peki, bu yeni yakla\u015f\u0131m neden standart reaktif formlardan daha iyi olarak kabul ediliyor ve geli\u015ftiricilere ne gibi avantajlar sunuyor?<\/p>\n
Geleneksel reaktif formlar, FormControl<\/code>, FormGroup<\/code> ve FormArray<\/code> gibi soyutlamalarla \u00e7al\u0131\u015f\u0131r. Bu yap\u0131lar, RxJS obzervable'lar\u0131 (\u00f6zellikle valueChanges<\/code> ve statusChanges<\/code>) arac\u0131l\u0131\u011f\u0131yla formun durumunu izlememizi sa\u011flar. Bu yakla\u015f\u0131m g\u00fc\u00e7l\u00fc olsa da, \u00f6zellikle daha karma\u015f\u0131k senaryolarda baz\u0131 zorluklar ortaya \u00e7\u0131karabilir:<\/p>\n
    \n
  1. De\u011fi\u015fmezlik (Immutability) Y\u00f6netimi:<\/strong> Form de\u011ferlerinin manuel olarak g\u00fcncellenmesi veya d\u0131\u015far\u0131dan gelen verilerle birle\u015ftirilmesi gerekti\u011finde, de\u011fi\u015fmezli\u011fi korumak i\u00e7in genellikle spread operat\u00f6rleri veya immutable k\u00fct\u00fcphaneler kullanmak gerekirdi. Bu, kodun okunabilirli\u011fini ve karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131rabilirdi.<\/li>\n
  2. Abonelik Y\u00f6netimi:<\/strong> valueChanges<\/code> veya statusChanges<\/code> obzervable'lar\u0131na abone oldu\u011funuzda, memory leak'leri \u00f6nlemek i\u00e7in abonelikleri manuel olarak y\u00f6netmek (\u00f6rne\u011fin, ngOnDestroy<\/code> i\u00e7inde unsubscribe<\/code> etmek) zorunluydu. Bu, \u00f6zellikle \u00e7ok say\u0131da form alan\u0131yla u\u011fra\u015f\u0131rken yorucu olabilirdi.<\/li>\n
  3. Change Detection Tetikleyicileri:<\/strong> Zone.js tabanl\u0131 Change Detection, formdaki herhangi bir de\u011fi\u015fiklikte genellikle daha geni\u015f bir alan\u0131 kontrol ederdi, bu da gereksiz render i\u015flemlerine yol a\u00e7abilirdi.<\/li>\n<\/ol>\n
    Signal Forms<\/strong>, bu zorluklara Signal tabanl\u0131, daha modern ve verimli bir \u00e7\u00f6z\u00fcm sunar. Signal Forms'un temel felsefesi, formun t\u00fcm durumunu (de\u011fer, ge\u00e7erlilik, dokunulmu\u015fluk vb.) Signal'lar arac\u0131l\u0131\u011f\u0131yla y\u00f6netmektir. Bu, a\u015fa\u011f\u0131daki \u00f6nemli avantajlar\u0131 beraberinde getirir:<\/p>\n
      \n
    • Do\u011fal Reaktivite ve Otomatik G\u00fcncellemeler:<\/strong> Signal Forms'daki t\u00fcm form kontrolleri (SignalFormControl, SignalFormGroup, SignalFormArray gibi), i\u00e7 de\u011ferlerini Signal olarak tutar. Bu sayede, bir form alan\u0131 de\u011fi\u015fti\u011finde, sadece ilgili k\u0131s\u0131mlar otomatik olarak g\u00fcncellenir ve bu Signal'\u0131 dinleyen bile\u015fenler veya computed<\/code> de\u011ferler yeniden hesaplan\u0131r. Manuel abonelik y\u00f6netimine gerek kalmaz, \u00e7\u00fcnk\u00fc ba\u011f\u0131ml\u0131l\u0131klar Signal mekanizmas\u0131 taraf\u0131ndan otomatik olarak izlenir.<\/li>\n
    • Daha Kolay De\u011fi\u015fmezlik:<\/strong> Signal Forms, de\u011fi\u015fmezli\u011fi (immutability) do\u011fal olarak destekler. Formun de\u011ferini de\u011fi\u015ftirdi\u011finizde, asl\u0131nda yeni bir Signal de\u011feri atam\u0131\u015f olursunuz. Bu, veri ak\u0131\u015f\u0131n\u0131 daha \u015feffaf hale getirir ve beklenmedik yan etkileri azalt\u0131r.<\/li>\n
    • Gran\u00fcler Change Detection:<\/strong> Signals'\u0131n do\u011fas\u0131 gere\u011fi, formdaki bir de\u011fi\u015fiklik sadece ilgili Signal'lar\u0131 ve onlara ba\u011f\u0131ml\u0131 olan bile\u015fenleri tetikler. Bu, gereksiz render i\u015flemlerini ortadan kald\u0131r\u0131r ve uygulaman\u0131n genel performans\u0131n\u0131 art\u0131r\u0131r. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k formlarda bu performans kazanc\u0131 \u00e7ok daha belirgin olur.<\/li>\n
    • Daha Basit ve Okunabilir Kod:<\/strong> Abonelik y\u00f6netimi gibi boilerplate kodun ortadan kalkmas\u0131, form kodunu daha sade ve okunabilir hale getirir. Geli\u015ftiriciler, formun i\u015f mant\u0131\u011f\u0131na daha fazla odaklanabilir.<\/li>\n<\/ul>\n
      Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, Signal Forms'un faydalar\u0131 \u00e7ok belirgindir. \u00d6rne\u011fin, bir \u00e7ok ad\u0131ml\u0131 anket uygulamas\u0131nda, her ad\u0131mda formun ge\u00e7erlili\u011fini dinamik olarak kontrol etmeniz ve sonraki ad\u0131ma ge\u00e7i\u015f d\u00fc\u011fmesini etkinle\u015ftirmeniz gerekebilir. Geleneksel formlarda, statusChanges<\/code> obzervable'\u0131na abone olup ge\u00e7erlilik durumunu izlemek ve ard\u0131ndan aboneli\u011fi manuel olarak iptal etmek gerekirdi. Signal Forms ile, formun ge\u00e7erlilik durumunu tutan bir computed<\/code> Signal olu\u015fturabilir ve bu computed<\/code> Signal'\u0131 do\u011frudan d\u00fc\u011fme etkinle\u015ftirme mant\u0131\u011f\u0131nda kullanabilirsiniz. Bu hem daha az kod hem de daha az hata potansiyeli demektir.<\/p>\n
      \n  \/\/ Signal Forms ile basit bir \u00f6rnek\n  import { SignalFormControl, SignalFormGroup, Validators } from '@angular\/forms\/signals'; \/\/ Yeni import yolu\n\n  const loginForm = new SignalFormGroup({\n    email: new SignalFormControl('test@example.com', [Validators.required, Validators.email]),\n    password: new SignalFormControl('', [Validators.required, Validators.minLength(6)])\n  });\n\n  \/\/ Formun ge\u00e7erlili\u011fini otomatik olarak izleyen bir Signal\n  const isFormValid = loginForm.valid; \/\/ Bu bir Signal'd\u0131r!\n\n  \/\/ Bir bile\u015fen i\u00e7inde\n  \/\/ ngOnInit() {\n  \/\/   effect(() => {\n  \/\/     console.log('Form ge\u00e7erli mi:', isFormValid.value);\n  \/\/   });\n  \/\/ }\n<\/pre>\n
      <\/code><\/p>\n
      G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, isFormValid<\/code> do\u011frudan form grubunun ge\u00e7erlilik durumunu bir Signal olarak d\u00f6nd\u00fcr\u00fcyor. Bu Signal'\u0131, template'inizde veya ba\u015fka bir effect<\/code> i\u00e7inde kullanabilirsiniz ve de\u011fi\u015fiklikler otomatik olarak yans\u0131r.<\/p>\n
      K\u0131sacas\u0131, Signal Forms, Angular'da form y\u00f6netimini bir sonraki seviyeye ta\u015f\u0131yor. Daha do\u011fal reaktivite, daha iyi performans ve daha az boilerplate kod sunarak, geli\u015ftiricilerin daha verimli ve keyifli bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011fl\u0131yor. Bu ge\u00e7i\u015f, Angular'\u0131n gelecekteki form y\u00f6netim standartlar\u0131n\u0131 belirleyecek \u00f6nemli bir ad\u0131md\u0131r.<\/p>\n
      Ad\u0131m Ad\u0131m Migrasyon: Mevcut Formlar\u0131n\u0131z\u0131 Signal Forms'a Nas\u0131l D\u00f6n\u00fc\u015ft\u00fcr\u00fcrs\u00fcn\u00fcz?<\/h2>\n
      Mevcut Angular projenizdeki reaktif formlar\u0131 Signal Forms'a d\u00f6n\u00fc\u015ft\u00fcrmek, ilk ba\u015fta karma\u015f\u0131k gibi g\u00f6r\u00fcnse de, Angular ekibi bu ge\u00e7i\u015fi m\u00fcmk\u00fcn oldu\u011funca p\u00fcr\u00fczs\u00fcz hale getirmek i\u00e7in ad\u0131mlar atm\u0131\u015ft\u0131r. Bu b\u00f6l\u00fcmde, mevcut formlar\u0131n\u0131z\u0131 Signal Forms'a nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, kod \u00f6rnekleriyle birlikte inceleyece\u011fiz.<\/p>\n
      \u00d6ncelikle, projenizin Angular v21'e g\u00fcncellendi\u011finden emin olmal\u0131s\u0131n\u0131z. E\u011fer hen\u00fcz yapmad\u0131ysan\u0131z, CLI kullanarak projenizi g\u00fcncelleyin:<\/p>\n
      \n  ng update @angular\/core @angular\/cli\n<\/pre>\n
      <\/code><\/p>\n
      G\u00fcncelleme tamamland\u0131ktan sonra, mevcut FormControl<\/code>, FormGroup<\/code> ve FormArray<\/code> yap\u0131lar\u0131n\u0131z\u0131 Signal tabanl\u0131 kar\u015f\u0131l\u0131klar\u0131yla de\u011fi\u015ftirmeye ba\u015flayabilirsiniz. Signal Forms API'si, geleneksel reaktif formlara \u00e7ok benzer bir yap\u0131ya sahiptir, bu da \u00f6\u011frenme e\u011frisini d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n
      1. FormControl'den signal()<\/code> Tabanl\u0131 Forma Ge\u00e7i\u015f<\/h3>\n
      En temelden ba\u015flayal\u0131m: tek bir FormControl<\/code>. Diyelim ki \u015f\u00f6yle bir FormControl<\/code>'iniz var:<\/p>\n
      \n  \/\/ Eski Y\u00f6ntem\n  import { FormControl, Validators } from '@angular\/forms';\n\n  class OldFormComponent {\n    emailControl = new FormControl('eski@ornek.com', [Validators.required, Validators.email]);\n\n    onSubmit() {\n      console.log(this.emailControl.value);\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Bunu Signal Forms'a d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in, SignalFormControl<\/code>'\u00fc import etmeniz ve kullanman\u0131z yeterlidir:<\/p>\n
      \n  \/\/ Yeni Y\u00f6ntem (Signal Forms)\n  import { SignalFormControl, Validators } from '@angular\/forms\/signals'; \/\/ Yeni import yolu\n\n  class NewFormComponent {\n    emailControl = new SignalFormControl('yeni@ornek.com', [Validators.required, Validators.email]);\n\n    onSubmit() {\n      console.log(this.emailControl.value()); \/\/ Signal de\u011ferini okumak i\u00e7in () kullan\u0131l\u0131r\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, value<\/code> \u00f6zelli\u011fini okumak yerine, value()<\/code> fonksiyonunu \u00e7a\u011f\u0131rman\u0131z gerekiyor. De\u011fer atamak i\u00e7inse emailControl.setValue('yeni_deger')<\/code> yerine emailControl.set('yeni_deger')<\/code> kullanabilirsiniz.<\/p>\n
      2. FormGroup<\/code> ve FormArray<\/code>'in Signal Forms Kar\u015f\u0131l\u0131klar\u0131<\/h3>\n
      FormGroup<\/code> ve FormArray<\/code> i\u00e7in de benzer bir mant\u0131k ge\u00e7erlidir. SignalFormGroup<\/code> ve SignalFormArray<\/code> import ederek mevcut yap\u0131lar\u0131n\u0131z\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\n
      FormGroup<\/code> Migrasyonu:<\/h4>\n
      Mevcut bir FormGroup<\/code> \u00f6rne\u011fi:<\/p>\n
      \n  \/\/ Eski Y\u00f6ntem\n  import { FormGroup, FormControl, Validators } from '@angular\/forms';\n\n  class OldUserForm {\n    userForm = new FormGroup({\n      firstName: new FormControl('', Validators.required),\n      lastName: new FormControl('', Validators.required),\n      age: new FormControl(18, [Validators.min(18), Validators.max(99)])\n    });\n\n    ngOnInit() {\n      this.userForm.valueChanges.subscribe(values => {\n        console.log('Form de\u011ferleri de\u011fi\u015fti:', values);\n      });\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Signal Forms'a d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f hali:<\/p>\n
      \n  \/\/ Yeni Y\u00f6ntem (Signal Forms)\n  import { SignalFormGroup, SignalFormControl, Validators } from '@angular\/forms\/signals';\n  import { effect } from '@angular\/core';\n\n  class NewUserForm {\n    userForm = new SignalFormGroup({\n      firstName: new SignalFormControl('', Validators.required),\n      lastName: new SignalFormControl('', Validators.required),\n      age: new SignalFormControl(18, [Validators.min(18), Validators.max(99)])\n    });\n\n    constructor() {\n      \/\/ valueChanges yerine effect kullan\u0131yoruz\n      effect(() => {\n        console.log('Form de\u011ferleri de\u011fi\u015fti:', this.userForm.value());\n      });\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Burada en b\u00fcy\u00fck de\u011fi\u015fiklik, valueChanges<\/code> Observable'\u0131na abone olmak yerine, effect<\/code> kullanarak userForm.value()<\/code> Signal'\u0131n\u0131 izlememizdir. Bu, abonelik y\u00f6netimini tamamen ortadan kald\u0131r\u0131r.<\/p>\n
      FormArray<\/code> Migrasyonu:<\/h4>\n
      Dinamik olarak eklenen alanlar i\u00e7in FormArray<\/code> kullan\u0131yorduk. \u015eimdi SignalFormArray<\/code>'i kullanal\u0131m.<\/p>\n
      \n  \/\/ Eski Y\u00f6ntem\n  import { FormArray, FormGroup, FormControl, Validators } from '@angular\/forms';\n\n  class OldSkillsForm {\n    skillsForm = new FormGroup({\n      skills: new FormArray([\n        new FormControl('JavaScript', Validators.required)\n      ])\n    });\n\n    get skills(): FormArray {\n      return this.skillsForm.get('skills') as FormArray;\n    }\n\n    addSkill() {\n      this.skills.push(new FormControl('', Validators.required));\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Signal Forms'a d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f hali:<\/p>\n
      \n  \/\/ Yeni Y\u00f6ntem (Signal Forms)\n  import { SignalFormArray, SignalFormGroup, SignalFormControl, Validators } from '@angular\/forms\/signals';\n\n  class NewSkillsForm {\n    skillsForm = new SignalFormGroup({\n      skills: new SignalFormArray([\n        new SignalFormControl('JavaScript', Validators.required)\n      ])\n    });\n\n    get skills(): SignalFormArray { \/\/ D\u00f6n\u00fc\u015f tipi de de\u011fi\u015fir\n      return this.skillsForm.get('skills') as SignalFormArray;\n    }\n\n    addSkill() {\n      this.skills.push(new SignalFormControl('', Validators.required));\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Yine, yap\u0131sal olarak \u00e7ok b\u00fcy\u00fck bir fark yok. FormArray<\/code> yerine SignalFormArray<\/code> kullan\u0131yor ve skills<\/code> getter'\u0131n\u0131n d\u00f6n\u00fc\u015f tipini g\u00fcncelliyoruz. \u0130\u015flemler (push<\/code>, removeAt<\/code> vb.) ayn\u0131 kal\u0131r.<\/p>\n
      3. Validasyon (Do\u011frulama) Stratejileri<\/h3>\n
      Validasyonlar, Signal Forms'da da ayn\u0131 \u015fekilde Validators<\/code> mod\u00fcl\u00fc kullan\u0131larak tan\u0131mlan\u0131r. Ancak, formun ge\u00e7erlilik durumunu izlemek i\u00e7in Signal'lar\u0131 kullan\u0131rs\u0131n\u0131z.<\/p>\n
      \n  import { SignalFormGroup, SignalFormControl, Validators } from '@angular\/forms\/signals';\n  import { effect } from '@angular\/core';\n\n  class RegistrationForm {\n    registrationForm = new SignalFormGroup({\n      username: new SignalFormControl('', [Validators.required, Validators.minLength(3)]),\n      email: new SignalFormControl('', [Validators.required, Validators.email]),\n    });\n\n    constructor() {\n      \/\/ Formun genel ge\u00e7erlilik durumunu izlemek i\u00e7in\n      effect(() => {\n        console.log('Form ge\u00e7erli mi:', this.registrationForm.valid());\n        if (!this.registrationForm.valid()) {\n          console.log('Hatalar:', this.registrationForm.errors());\n        }\n      });\n\n      \/\/ Tek bir kontrol\u00fcn ge\u00e7erlilik durumunu izlemek i\u00e7in\n      effect(() => {\n        console.log('Kullan\u0131c\u0131 ad\u0131 ge\u00e7erli mi:', this.registrationForm.controls.username.valid());\n      });\n    }\n\n    onSubmit() {\n      if (this.registrationForm.valid()) {\n        console.log('Form g\u00f6nderildi:', this.registrationForm.value());\n      } else {\n        console.log('Form hatal\u0131, l\u00fctfen d\u00fczeltin.');\n      }\n    }\n  }\n<\/pre>\n
      <\/code><\/p>\n
      Burada registrationForm.valid()<\/code> ve registrationForm.controls.username.valid()<\/code> gibi ifadeler, formun veya kontrol\u00fcn ge\u00e7erlilik durumunu bir Signal olarak verir. Bu sayede, UI'da dinamik olarak hata mesajlar\u0131 g\u00f6stermek veya bir submit d\u00fc\u011fmesini etkinle\u015ftirmek \u00e7ok daha kolay ve reaktif hale gelir.<\/p>\n
      \n
      Vaka Analizi: Bir Kullan\u0131c\u0131 Kay\u0131t Formunun Signal Forms'a Migrasyonu<\/p>\n
      Eski bir web uygulamas\u0131nda, kullan\u0131c\u0131 kay\u0131t formu (SignUpComponent<\/code>) geleneksel reaktif formlar kullan\u0131yordu. Formda kullan\u0131c\u0131 ad\u0131, e-posta, \u015fifre ve \u015fifre onay\u0131 alanlar\u0131 vard\u0131. \u015eifrelerin e\u015fle\u015fti\u011fini kontrol eden \u00f6zel bir validat\u00f6r de bulunuyordu. Migrasyon s\u00fcrecinde at\u0131lan ad\u0131mlar:<\/p>\n
        \n
      1. T\u00fcm FormControl<\/code>, FormGroup<\/code> importlar\u0131 @angular\/forms\/signals<\/code> yolundaki SignalFormControl<\/code>, SignalFormGroup<\/code> ile de\u011fi\u015ftirildi.<\/li>\n
      2. SignUpComponent<\/code>'in ngOnInit<\/code> metodunda bulunan form.valueChanges.subscribe(...)<\/code> \u00e7a\u011fr\u0131lar\u0131, bile\u015fenin constructor<\/code>'\u0131 i\u00e7inde effect(() => { ... })<\/code> bloklar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc. Bu, abonelik y\u00f6netimini ortadan kald\u0131rd\u0131.<\/li>\n
      3. \u00d6zel validat\u00f6r fonksiyonu, Signal Forms ile uyumlu olacak \u015fekilde k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklikle kald\u0131. Validat\u00f6rlerin return de\u011feri hala ayn\u0131 yap\u0131da kald\u0131.<\/li>\n
      4. Template dosyalar\u0131nda, form kontrol de\u011ferlerini okurken control.value<\/code> yerine control.value()<\/code> kullan\u0131ld\u0131. Ayn\u0131 \u015fekilde, form.valid<\/code> yerine form.valid()<\/code> gibi Signal okuma \u00e7a\u011fr\u0131lar\u0131 eklendi.<\/li>\n<\/ol>\n
        Sonu\u00e7: Formun performans\u0131, \u00f6zellikle karma\u015f\u0131k validasyonlar ve dinamik alan g\u00fcncellemelerinde g\u00f6zle g\u00f6r\u00fcl\u00fcr \u015fekilde artt\u0131. Kod, abonelik y\u00f6netiminden kurtuldu\u011fu i\u00e7in daha sade ve okunabilir hale geldi.<\/p>\n<\/blockquote>\n
        Genel olarak, migrasyon s\u00fcreci, mevcut kod yap\u0131n\u0131za ve formlar\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fecektir. Ancak, temel prensip, RxJS tabanl\u0131 reaktif form API'lerini Signal tabanl\u0131 muadilleriyle de\u011fi\u015ftirmek ve reaksiyonlar i\u00e7in effect<\/code> veya computed<\/code> kullanmakt\u0131r. Bu ad\u0131mlar\u0131 dikkatlice takip ederek, projenizi modern Angular v21'in sundu\u011fu Signal Forms avantajlar\u0131ndan faydalanacak \u015fekilde d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n
        Signal Forms'u \u0130leri D\u00fczeyde Kullan\u0131m: Performans \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n
        Angular Signal Forms, form y\u00f6netimini basitle\u015ftirmenin yan\u0131 s\u0131ra, \u00f6zellikle performans ve esneklik konusunda ileri d\u00fczey kullan\u0131m senaryolar\u0131 i\u00e7in de g\u00fc\u00e7l\u00fc imkanlar sunar. Bu b\u00f6l\u00fcmde, Signal Forms'un potansiyelini tam olarak ortaya \u00e7\u0131karacak ipu\u00e7lar\u0131n\u0131 ve en iyi uygulamalar\u0131 inceleyece\u011fiz, b\u00f6ylece karma\u015f\u0131k formlar\u0131 bile optimize edilmi\u015f ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde y\u00f6netebilirsiniz.<\/p>\n
        1. Karma\u015f\u0131k Senaryolarda computed<\/code> ve effect<\/code> Kullan\u0131m\u0131<\/h3>\n
        Signal Forms ile \u00e7al\u0131\u015f\u0131rken, computed<\/code> ve effect<\/code> fonksiyonlar\u0131, form mant\u0131\u011f\u0131n\u0131z\u0131 daha mod\u00fcler ve reaktif hale getirmek i\u00e7in vazge\u00e7ilmez ara\u00e7lard\u0131r. \u00d6zellikle dinamik olarak de\u011fi\u015fen alanlar, asenkron validasyonlar veya formun genel durumuna g\u00f6re UI g\u00fcncellemeleri gibi senaryolarda bu ara\u00e7lar\u0131 etkin bir \u015fekilde kullanabilirsiniz.<\/p>\n
        Dinamik Alan Etkinle\u015ftirme\/Devre D\u0131\u015f\u0131 B\u0131rakma:<\/strong> Bir kullan\u0131c\u0131 bir onay kutusunu i\u015faretledi\u011finde belirli bir alan\u0131n g\u00f6r\u00fcn\u00fcr veya d\u00fczenlenebilir hale gelmesi gibi durumlarda computed<\/code> Signal'lar devreye girer. \u00d6rne\u011fin:<\/p>\n
        \n  import { SignalFormGroup, SignalFormControl, Validators } from '@angular\/forms\/signals';\n  import { computed, effect } from '@angular\/core';\n\n  class PaymentForm {\n    paymentForm = new SignalFormGroup({\n      paymentMethod: new SignalFormControl('creditCard'),\n      cardNumber: new SignalFormControl('', Validators.required),\n      paypalEmail: new SignalFormControl('', [Validators.required, Validators.email]),\n    });\n\n    constructor() {\n      \/\/ \u00d6deme y\u00f6ntemi de\u011fi\u015ftik\u00e7e alanlar\u0131 dinamik olarak etkinle\u015ftir\/devre d\u0131\u015f\u0131 b\u0131rak\n      effect(() => {\n        if (this.paymentForm.controls.paymentMethod.value() === 'creditCard') {\n          this.paymentForm.controls.cardNumber.enable();\n          this.paymentForm.controls.paypalEmail.disable();\n          this.paymentForm.controls.paypalEmail.set(''); \/\/ De\u011feri s\u0131f\u0131rla\n        } else if (this.paymentForm.controls.paymentMethod.value() === 'paypal') {\n          this.paymentForm.controls.cardNumber.disable();\n          this.paymentForm.controls.cardNumber.set(''); \/\/ De\u011feri s\u0131f\u0131rla\n          this.paymentForm.controls.paypalEmail.enable();\n        }\n      });\n    }\n  }\n<\/pre>\n
        <\/code><\/p>\n
        Bu \u00f6rnekte, effect<\/code> kullanarak paymentMethod<\/code> Signal'\u0131ndaki de\u011fi\u015fiklikleri izliyor ve buna g\u00f6re ilgili form kontrollerini etkinle\u015ftirip devre d\u0131\u015f\u0131 b\u0131rak\u0131yoruz. Bu, daha temiz ve deklaratif bir yakla\u015f\u0131m sunar.<\/p>\n
        2. Asenkron Validasyonlar<\/h3>\n
        Asenkron validasyonlar (\u00f6rne\u011fin, bir kullan\u0131c\u0131 ad\u0131n\u0131n veritaban\u0131nda zaten olup olmad\u0131\u011f\u0131n\u0131 kontrol etme), geleneksel reaktif formlarda Observable'lar ile y\u00f6netilirdi. Signal Forms'da ise yine effect<\/code> ve computed<\/code> kombinasyonunu kullanarak bu i\u015flemi daha entegre bir \u015fekilde yapabiliriz.<\/p>\n
        \n  import { SignalFormControl, Validators } from '@angular\/forms\/signals';\n  import { signal, effect } from '@angular\/core';\n  import { debounceTime, switchMap, of } from 'rxjs'; \/\/ RxJS hala kullan\u0131labilir\n\n  function uniqueUsernameValidator(control: SignalFormControl) {\n    \/\/ API \u00e7a\u011fr\u0131s\u0131 sim\u00fclasyonu\n    return new Promise(resolve => {\n      setTimeout(() => {\n        const takenUsernames = ['admin', 'user123'];\n        if (takenUsernames.includes(control.value())) {\n          resolve({ uniqueUsername: true });\n        } else {\n          resolve(null);\n        }\n      }, 500);\n    });\n  }\n\n  class UsernameControl {\n    username = new SignalFormControl('', { asyncValidators: [uniqueUsernameValidator] });\n    usernameStatus = signal('pending'); \/\/ 'pending', 'valid', 'invalid'\n\n    constructor() {\n      effect(() => {\n        \/\/ Kontrol\u00fcn durumu de\u011fi\u015ftik\u00e7e usernameStatus'u g\u00fcncelle\n        \/\/ Asenkron validasyonlar i\u00e7in \u00f6zel bir durum y\u00f6netimi gerekebilir\n        \/\/ Angular forms asyncValidators k\u0131sm\u0131 hen\u00fcz tam olarak signals ile entegre olmayabilir,\n        \/\/ bu y\u00fczden ge\u00e7ici durumlar manuel y\u00f6netilebilir.\n        console.log('Username durumu:', this.username.status());\n        this.usernameStatus.set(this.username.status());\n      });\n    }\n  }\n<\/pre>\n
        <\/code><\/p>\n
        Bu \u00f6rnekte, asyncValidators<\/code>'lar hala Promise veya Observable d\u00f6nd\u00fcrebilir. Signal Forms, bu asenkron validasyonlar\u0131 entegre eder ve control.status()<\/code> Signal'\u0131 arac\u0131l\u0131\u011f\u0131yla durumunu g\u00fcnceller. effect<\/code> kullanarak bu durumu izleyip UI'\u0131 g\u00fcncelleyebilirsiniz.<\/p>\n
        3. Form Bile\u015fenlerinin Yeniden Kullan\u0131labilirli\u011fi<\/h3>\n
        Signal Forms ile, daha \u00f6nce oldu\u011fu gibi, karma\u015f\u0131k formlar\u0131 k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rmak \u00e7ok daha kolayd\u0131r. Her alt bile\u015fen kendi SignalFormGroup<\/code> veya SignalFormControl<\/code>'\u00fcn\u00fc y\u00f6netebilir ve Input<\/code>\/Output<\/code> veya Signal tabanl\u0131 yakla\u015f\u0131mlarla \u00fcst bile\u015fenle ileti\u015fim kurabilir.<\/p>\n
        \n  \/\/ child-address-form.component.ts\n  import { Component, Input } from '@angular\/core';\n  import { SignalFormGroup, SignalFormControl, Validators } from '@angular\/forms\/signals';\n\n  @Component({\n    selector: 'app-address-form',\n    template: 
        \n        \n        \n      <\/div><\/code>,\n    standalone: true,\n    imports: [ReactiveFormsModule] \/\/ ReactiveFormsModule hala gereklidir\n  })\n  export class AddressFormComponent {\n    @Input() addressForm!: SignalFormGroup<{ street: SignalFormControl, city: SignalFormControl }>;\n\n    constructor() {\n      if (!this.addressForm) {\n        this.addressForm = new SignalFormGroup({\n          street: new SignalFormControl('', Validators.required),\n          city: new SignalFormControl('', Validators.required)\n        });\n      }\n    }\n  }\n\n  \/\/ parent-user-profile.component.ts\n  import { Component } from '@angular\/core';\n  import { SignalFormGroup, SignalFormControl } from '@angular\/forms\/signals';\n  import { AddressFormComponent } from '.\/child-address-form.component';\n\n  @Component({\n    selector: 'app-user-profile',\n    template: 
        \n        \n        <\/app-address-form>\n