{"id":34513,"date":"2025-11-18T02:40:53","date_gmt":"2025-11-17T23:40:53","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34513"},"modified":"2025-11-18T02:40:53","modified_gmt":"2025-11-17T23:40:53","slug":"angularda-reactive-formlar-degisiklikleri-dinleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-reactive-formlar-degisiklikleri-dinleme\/","title":{"rendered":"Angular’da Reactive Formlar: De\u011fi\u015fiklikleri Dinleme"},"content":{"rendered":"

<\/p>\n

Angular’da Reactive Formlar: De\u011fi\u015fiklikleri Dinleme<\/h2>\n

Giri\u015f<\/h2>\n

Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir platform sunar. Bu platformun temel ta\u015flar\u0131ndan biri de form y\u00f6netimidir. Angular, formlar\u0131 y\u00f6netmek i\u00e7in iki farkl\u0131 yakla\u015f\u0131m sunar: Template-driven Forms ve Reactive Forms. Bu makalede, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k formlar i\u00e7in tercih edilen, daha \u00f6l\u00e7eklenebilir ve test edilebilir bir yap\u0131ya sahip olan Reactive Forms \u00fczerine odaklanaca\u011f\u0131z. Reactive Forms, form durumunu ve de\u011fi\u015fikliklerini programatik olarak y\u00f6netme imkan\u0131 sunar. Bu makalenin ana konusu ise, Reactive Forms yap\u0131s\u0131 i\u00e7inde form alanlar\u0131ndaki veya genel form durumundaki de\u011fi\u015fiklikleri nas\u0131l dinleyece\u011fimiz ve bu de\u011fi\u015fikliklere nas\u0131l tepki verece\u011fimizdir.<\/p>\n

Formlardaki de\u011fi\u015fiklikleri dinlemek, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flamak ve uygulaman\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in kritik \u00f6neme sahiptir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n belirli bir alana giri\u015f yapmas\u0131yla ba\u015fka bir alan\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc de\u011fi\u015ftirebilir, formun ge\u00e7erlili\u011fine g\u00f6re bir g\u00f6nder d\u00fc\u011fmesini etkinle\u015ftirebilir veya belirli bir gecikmeyle sunucuya otomatik arama istekleri g\u00f6nderebilirsiniz. T\u00fcm bu senaryolar, Reactive Forms’un sundu\u011fu g\u00fc\u00e7l\u00fc g\u00f6zlemlenebilir (observable) mekanizmalar\u0131 sayesinde kolayca uygulanabilir.<\/p>\n

Bu makalede, FormControl<\/code>, FormGroup<\/code> ve FormArray<\/code> gibi Reactive Forms yap\u0131lar\u0131n\u0131 kullanarak valueChanges<\/code> ve statusChanges<\/code> g\u00f6zlemlenebilirlerini derinlemesine inceleyece\u011fiz. Ayr\u0131ca, RxJS operat\u00f6rlerini (\u00f6rne\u011fin debounceTime<\/code>, distinctUntilChanged<\/code>, switchMap<\/code>) kullanarak bu de\u011fi\u015fiklikleri nas\u0131l daha etkin bir \u015fekilde y\u00f6netece\u011fimizi, performans sorunlar\u0131n\u0131 nas\u0131l \u00e7\u00f6zece\u011fimizi ve \u00e7e\u015fitli pratik senaryolar\u0131 nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenece\u011fiz. Son olarak, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in abonelikleri do\u011fru bir \u015fekilde y\u00f6netmenin \u00f6nemine de\u011finece\u011fiz.<\/p>\n

Reactive Form Temelleri ve De\u011fi\u015fiklik Dinleme Mekanizmalar\u0131<\/h2>\n

Angular Reactive Forms, form kontrollerini programatik olarak olu\u015fturman\u0131za ve y\u00f6netmenize olanak tan\u0131r. Formun her bir par\u00e7as\u0131 bir JavaScript s\u0131n\u0131f\u0131 taraf\u0131ndan temsil edilir ve bu s\u0131n\u0131flar formun de\u011ferini ve durumunu bir g\u00f6zlemlenebilir ak\u0131\u015f (observable stream) olarak sunar.<\/p>\n

FormControl<\/code>, FormGroup<\/code>, FormArray<\/code> Yap\u0131lar\u0131<\/h3>\n

Reactive Forms’un \u00fc\u00e7 temel yap\u0131 ta\u015f\u0131 vard\u0131r:
\n* FormControl<\/code><\/strong>: Tek bir form giri\u015f alan\u0131n\u0131 (input, select, textarea vb.) temsil eder. De\u011ferini, ge\u00e7erlili\u011fini ve durumunu y\u00f6netir.
\n* FormGroup<\/code><\/strong>: Bir grup FormControl<\/code> veya ba\u015fka FormGroup<\/code> \u00f6rneklerini bir araya getirir. Genellikle bir formun tamam\u0131n\u0131 veya mant\u0131ksal olarak ili\u015fkili bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eder. T\u00fcm alt kontrollerinin de\u011ferlerini ve ge\u00e7erlilik durumunu toplar.
\n* FormArray<\/code><\/strong>: Dinamik olarak eklenip \u00e7\u0131kar\u0131labilen bir kontrol koleksiyonunu temsil eder. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n birden fazla e-posta adresi veya telefon numaras\u0131 girebildi\u011fi senaryolarda kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n

Bu \u00fc\u00e7 s\u0131n\u0131f\u0131n her biri, formdaki de\u011fi\u015fiklikleri dinlemek i\u00e7in iki \u00f6nemli g\u00f6zlemlenebilir (observable) \u00f6zellik sunar: valueChanges<\/code> ve statusChanges<\/code>.<\/p>\n

valueChanges<\/code> Observable’\u0131<\/h3>\n

valueChanges<\/code>, bir FormControl<\/code>, FormGroup<\/code> veya FormArray<\/code>‘\u0131n de\u011feri her de\u011fi\u015fti\u011finde yeni bir de\u011fer yayan bir RxJS Observable’\u0131d\u0131r. Bu, kullan\u0131c\u0131n\u0131n form alanlar\u0131na her giri\u015f yapt\u0131\u011f\u0131nda, programatik olarak bir de\u011fer atand\u0131\u011f\u0131nda veya form s\u0131f\u0131rland\u0131\u011f\u0131nda tetiklenir.<\/p>\n

FormControl<\/code> ile Kullan\u0131m\u0131<\/h4>\n

Tek bir giri\u015f alan\u0131n\u0131n de\u011ferindeki de\u011fi\u015fiklikleri izlemek i\u00e7in FormControl<\/code>‘un valueChanges<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z.<\/p>\n

import { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { FormControl } from '@angular\/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-search-input',\n  template: \n    \n    
Arama Terimi: {{ searchTerm }}<\/p>\n  <\/code>\n})\nexport class SearchInputComponent implements OnInit, OnDestroy {\n  searchControl = new FormControl('');\n  searchTerm: string = '';\n  private destroy$ = new Subject();\n\n  ngOnInit() {\n    this.searchControl.valueChanges\n      .pipe(\n        takeUntil(this.destroy$) \/\/ Bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nlemek i\u00e7in\n      )\n      .subscribe(value => {\n        this.searchTerm = value;\n        console.log('Arama terimi de\u011fi\u015fti:', value);\n        \/\/ Burada arama i\u015flemini tetikleyebilirsiniz\n      });\n  }\n\n  ngOnDestroy() {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n}<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, searchControl<\/code> adl\u0131 FormControl<\/code>‘un de\u011feri her de\u011fi\u015fti\u011finde, subscribe<\/code> blo\u011fu i\u00e7indeki kod \u00e7al\u0131\u015f\u0131r. Bu sayede, kullan\u0131c\u0131n\u0131n yazd\u0131\u011f\u0131 her karakterde searchTerm<\/code> de\u011fi\u015fkeni g\u00fcncellenir ve konsola loglan\u0131r.<\/p>\n
FormGroup<\/code> ile Kullan\u0131m\u0131<\/h4>\n
Bir FormGroup<\/code>‘un valueChanges<\/code> \u00f6zelli\u011fi, gruptaki herhangi bir kontrol\u00fcn de\u011feri de\u011fi\u015fti\u011finde tetiklenir ve FormGroup<\/code>‘un t\u00fcm de\u011ferlerini i\u00e7eren bir nesne yay\u0131mlar. Bu, formun genel de\u011ferini izlemek i\u00e7in idealdir.<\/p>\n
import { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-user-profile',\n  template: \n    
\n      \n      \n      \n    <\/form>\n    
{{ formValues | json }}<\/pre>\n
  <\/code>
\n})
\nexport class UserProfileComponent implements OnInit, OnDestroy {
\n  userProfileForm = new FormGroup({
\n    firstName: new FormControl('', Validators.required),
\n    lastName: new FormControl('', Validators.required),
\n    email: new FormControl('', [Validators.required, Validators.email])
\n  });<\/p>\n
  formValues: any;
\n  private destroy$ = new Subject();<\/p>\n
  ngOnInit() {
\n    this.userProfileForm.valueChanges
\n      .pipe(
\n        takeUntil(this.destroy$)
\n      )
\n      .subscribe(values => {
\n        this.formValues = values;
\n        console.log('Form de\u011ferleri de\u011fi\u015fti:', values);
\n        \/\/ Burada formun tamam\u0131n\u0131n de\u011ferine g\u00f6re i\u015flemler yapabilirsiniz
\n      });
\n  }<\/p>\n
  ngOnDestroy() {
\n    this.destroy$.next();
\n    this.destroy$.complete();
\n  }
\n}<\/code>
\nBu \u00f6rnekte, userProfileForm<\/code> i\u00e7indeki firstName<\/code>, lastName<\/code> veya email<\/code> alanlar\u0131ndan herhangi biri de\u011fi\u015fti\u011finde, userProfileForm.valueChanges<\/code> tetiklenir ve t\u00fcm formun g\u00fcncel de\u011ferini ({ firstName: '...', lastName: '...', email: '...' }<\/code> \u015feklinde) yay\u0131mlar.<\/p>\n
FormArray<\/code> ile Kullan\u0131m\u0131<\/h4>\n
FormArray<\/code>‘\u0131n valueChanges<\/code> \u00f6zelli\u011fi, dizideki herhangi bir kontrol\u00fcn de\u011feri de\u011fi\u015fti\u011finde veya diziye yeni bir kontrol eklendi\u011finde\/\u00e7\u0131kar\u0131ld\u0131\u011f\u0131nda tetiklenir. Yay\u0131mlanan de\u011fer, dizideki t\u00fcm kontrollerin de\u011ferlerini i\u00e7eren bir dizidir.<\/p>\n
import { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { FormArray, FormControl, FormGroup, Validators, FormBuilder } from '@angular\/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-skill-list',\n  template: \n    \n      
\n        
\n          \n