<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular 4 uygulamalar\u0131nda formlarla \u00e7al\u0131\u015fman\u0131n iki farkl\u0131 yolu olan “\u015eablon Odakl\u0131 Form<\/strong>” ve “Model Odakl\u0131 Form<\/strong>” yap\u0131lar\u0131n\u0131 inceleyece\u011fiz.<\/p>\n

Genel Gereksinimler<\/h4>\n
Form yap\u0131lar\u0131nda \u00e7al\u0131\u015fabilmek i\u00e7in belirli mod\u00fclleri uygulamam\u0131z\u0131n “app.module.ts” isimli ana mod\u00fcl dosyas\u0131na import etmemiz gerekmektedir. Bizler yukar\u0131da \u015eablon Odakl\u0131 Form ve Model Odakl\u0131 Form olmak \u00fczere iki farkl\u0131 yap\u0131 \u00fczerinden konuyu de\u011ferlendirece\u011fimizi belirtmi\u015ftik. Dolay\u0131s\u0131yla bu iki yap\u0131ya \u00f6zel mod\u00fcllerimiz olacakt\u0131r.<\/p>\n
\u015eablon odakl\u0131 form yap\u0131lar\u0131 i\u00e7in;<\/p>\n
\r\nimport { FormsModule } from '@angular\/forms';\r\n<\/pre>\n
Model odakl\u0131 form yap\u0131lar\u0131 i\u00e7in ise;<\/p>\n
\r\nimport { ReactiveFormsModule } from '@angular\/forms';\r\n<\/pre>\n
mod\u00fcllerini kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n
Ben her iki durumuda kar\u015f\u0131lamas\u0131 i\u00e7in \u00f6rne\u011fimizde iki mod\u00fcl\u00fcde import ediyorum.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { ReactiveFormsModule } from '@angular\/forms';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { ContactFormComponent } from '.\/contact-form\/contact-form.component';\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n ContactFormComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n FormsModule,\r\n ReactiveFormsModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
\u015eimdi ilk olarak \u015fablon odakl\u0131 formlar\u0131 ele alarak ba\u015flayal\u0131m.<\/p>\n
\u015eablon Odakl\u0131 Formlar<\/h4>\n
\u015eablon odakl\u0131 formlarda \u00e7al\u0131\u015fmalar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu \u015fablon \u00fczerinde ger\u00e7ekle\u015ftirilmektedir. Bunun i\u00e7in basit bir ileti\u015fim formu \u00f6rneklendirmede olduk\u00e7a yeterli olacakt\u0131r.<\/p>\n
\r\n<form #frmIletisim="ngForm" (ngSubmit)="OnClickForm(frmIletisim.value)">\r\n <input type="text" name="adi" placeholder="Ad\u0131n\u0131z..." ngModel \/>\r\n <br>\r\n <input type="email" name="email" placeholder="E-Posta Adresiniz..." ngModel \/>\r\n <br>\r\n <select name="meslek" ngModel>\r\n <option value="0">\u00d6\u011fretmen<\/option>\r\n <option value="1">Yaz\u0131l\u0131m M\u00fch.<\/option>\r\n <option value="2">Doktor<\/option>\r\n <option value="3">Di\u011fer<\/option>\r\n <\/select>\r\n <br>\r\n <textarea name="mesaj" placeholder="Mesaj\u0131n\u0131z..." rows="7" ngModel><\/textarea>\r\n <br>\r\n <button>G\u00f6nder<\/button>\r\n<\/form>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer bir <form…> <\/form> etiketinin a\u00e7\u0131ld\u0131\u011f\u0131n\u0131 ve belirli attributelar ile \u00e7al\u0131\u015fmalar yap\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Burada, form nesnesine #frmIletisim<\/strong> etiketi verilerek bir isim atanm\u0131\u015ft\u0131r. Bu isme kar\u015f\u0131l\u0131k ngForm<\/strong> de\u011feri verilerek bunun bir Angular form uygulamas\u0131 oldu\u011fu bildirilmi\u015ftir. Ayr\u0131ca ngSubmit<\/strong> olay\u0131na OnClickForm<\/strong> fonksiyonu tan\u0131mlanm\u0131\u015ft\u0131r ve bu fonksiyona parametre olarak frmIletisim.value<\/strong> de\u011feri g\u00f6nderilmi\u015ftir. Bu de\u011fer form i\u00e7erisindeki elemanlar\u0131n kullan\u0131c\u0131 taraf\u0131ndan girilen t\u00fcm de\u011ferleri yakalayacak ve ilgili fonksiyona post edecektir.<\/p>\n
Angular Form uygulamalar\u0131nda dikkat etmeniz gereken bir di\u011fer husus ise post esnas\u0131nda form i\u00e7erisindeki elemanlardan hangilerini model olarak hesaba kataca\u011f\u0131n\u0131 belirlemektir. Bu i\u015flem i\u00e7inde ngModel<\/strong> \u00f6zelli\u011fi kullan\u0131lmaktad\u0131r. Yani form i\u00e7erisindeki elemanlara eri\u015febilmek istiyorsan\u0131z e\u011fer bu \u00f6zellik ile i\u015faretledi\u011finize dikkat etmeniz gerekmektedir.<\/p>\n
Formu tetikledi\u011fimizde programatik olarak nas\u0131l \u00e7al\u0131\u015faca\u011f\u0131m\u0131z\u0131 g\u00f6rebilmek i\u00e7in dilerseniz hi\u00e7 vakit kaybetmeden arkaplandaki kodlar\u0131m\u0131za da g\u00f6z atal\u0131m…<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n selector: 'app-contact-form',\r\n templateUrl: '.\/contact-form.component.html',\r\n styleUrls: ['.\/contact-form.component.css']\r\n})\r\nexport class ContactFormComponent implements OnInit {\r\n constructor() { }\r\n ngOnInit() {\r\n }\r\n OnClickForm(data) {\r\n alert("Ad\u0131 : " + data.adi + "\\nE-Posta : " + data.email + "\\nMeslek : " + data.meslek + "\\nMesaj : " + data.mesaj);\r\n }\r\n}\r\n<\/pre>\n
Burada tan\u0131mlamam\u0131z gereken tek yap\u0131, formun de\u011ferlerini g\u00f6nderdi\u011fimiz OnClickForm isimli fonksiyondur. Form post edildi\u011fi anda ilgili fonksiyon \u00e7al\u0131\u015facak ve “data” parametresine formun de\u011ferlerini getirecektir. Dolay\u0131s\u0131yla bizler form elemanlar\u0131n\u0131n de\u011ferlerine “name” \u00f6zelliklerinden eri\u015febilmekteyiz. <\/p>\n
Burada uygulamam\u0131z\u0131 kaydedip, yay\u0131nlarsak e\u011fer a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi i\u015flevsellikle kar\u015f\u0131la\u015faca\u011f\u0131z.<\/p>\n
$\"Angular$ <\/a><\/p>\n
Model Odakl\u0131 Formlar<\/h4>\n
Model odakl\u0131 formlarda \u00e7al\u0131\u015fmalar\u0131n \u00e7o\u011funu component s\u0131n\u0131f\u0131 i\u00e7erisinde ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n
\u0130lk olarak formumuzu ayarlayal\u0131m.<\/p>\n
\r\n<form [formGroup]="frmIletisim" (ngSubmit)="OnClickForm(frmIletisim.value)">\r\n <input type="text" placeholder="Ad\u0131n\u0131z..." formControlName="adi" \/>\r\n <br>\r\n <input type="email" placeholder="E-Posta Adresiniz..." formControlName="email" \/>\r\n <br>\r\n <select formControlName="meslek">\r\n <option value="0">\u00d6\u011fretmen<\/option>\r\n <option value="1">Yaz\u0131l\u0131m M\u00fch.<\/option>\r\n <option value="2">Doktor<\/option>\r\n <option value="3">Di\u011fer<\/option>\r\n <\/select>\r\n <br>\r\n <textarea placeholder="Mesaj\u0131n\u0131z..." rows="7" formControlName="mesaj"><\/textarea>\r\n <br>\r\n <button>G\u00f6nder<\/button>\r\n<\/form>\r\n<\/pre>\n
Burada dikkat ederseniz formu isimlendirirken [formGroup]<\/strong> \u00f6zelli\u011fi kullan\u0131lmaktad\u0131r. Ayr\u0131ca hangi elemanlar\u0131n form i\u015flemine tabii tutulaca\u011f\u0131n\u0131 formControlName<\/strong> \u00f6zelli\u011fi ile belirtiyoruz. Bu \u00f6zelli\u011fe verilen isim birazdan component s\u0131n\u0131f\u0131ndan ilgili nesnenin de\u011ferini elde edece\u011fimiz isim olacakt\u0131r.<\/p>\n
Arkaplanda component s\u0131n\u0131f\u0131m\u0131z\u0131 incelersek e\u011fer;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormGroup, FormControl } from '@angular\/forms';\r\n@Component({\r\n selector: 'app-contact-form',\r\n templateUrl: '.\/contact-form.component.html',\r\n styleUrls: ['.\/contact-form.component.css']\r\n})\r\nexport class ContactFormComponent implements OnInit {\r\n constructor() { }\r\n ngOnInit() {\r\n this.frmIletisim = new FormGroup({\r\n adi: new FormControl(),\r\n email: new FormControl(),\r\n meslek: new FormControl(),\r\n mesaj: new FormControl()\r\n });\r\n }\r\n frmIletisim;\r\n adi;\r\n email;\r\n meslek;\r\n mesaj;\r\n OnClickForm(data) {\r\n alert("Ad\u0131 : " + data.adi + "\\nE-Posta : " + data.email + "\\nMeslek : " + data.meslek + "\\nMesaj : " + data.mesaj);\r\n }\r\n}\r\n<\/pre>\n
g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere t\u00fcm mesele burada ceyran etmektedir.<\/p>\n
\u0130lk olarak “@angular\/forms<\/strong><\/em>” dizininden FormGroup<\/strong> ve FormControl<\/strong> mod\u00fcllerini ilgili s\u0131n\u0131fa import ediyoruz. Burada viewde forma formGroup<\/strong> ile vermi\u015f oldu\u011fumuz isimde bir de\u011fi\u015fken tan\u0131ml\u0131yoruz(frmIletisim). Ard\u0131ndan form i\u00e7erisindeki t\u00fcm elemanlar\u0131 kar\u015f\u0131layacak ve o elemanlar\u0131n formControlName<\/strong> \u00f6zelli\u011fine verilmi\u015f isimle birebir olacak \u015fekilde isimlendirilecek de\u011fi\u015fkenler tan\u0131ml\u0131yoruz(adi, email, meslek, mesaj).<\/p>\n
Burada mant\u0131k olarak; sayfa ilk tetiklendi\u011finde ngOnInit fonksiyonu i\u00e7erisinde formumuza(frmIletisim) bir FormGroup nesnesi tan\u0131mlayarak, bu nesne ile ilgili form i\u00e7erisindeki t\u00fcm elemanlara FormControl nesnesi arac\u0131l\u0131\u011f\u0131yla varsay\u0131lan de\u011ferlerini atayaca\u011f\u0131z ve uygulamay\u0131 bu \u015fekilde ba\u015flataca\u011f\u0131z. Burada FormControl nesnesinin constructer’\u0131na verilecek olan de\u011fer ilgili form nesnesinin o de\u011fer ile y\u00fcklenmesine sebep olacakt\u0131r.<\/p>\n
Velhas\u0131l uygulamay\u0131 bu \u015fekilde kaydedip, yay\u0131nlad\u0131\u011f\u0131m\u0131zda tekrardan problemsiz \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.<\/p>\n
$\"Angular$ <\/a><\/p>\n
Bir sonraki yaz\u0131m\u0131zda form g\u00fcvenlik ve do\u011frulamas\u0131n\u0131 sa\u011flad\u0131\u011f\u0131m\u0131z Angular 4 Forms Validations \u00fczerine de\u011ferlendirmede bulunuyor olaca\u011f\u0131z…<\/p>\n
O halde sab\u0131rs\u0131zl\u0131kla sonraki yaz\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere diyor hepinize esenlikler diliyorum…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular 4 uygulamalar\u0131nda formlarla \u00e7al\u0131\u015fman\u0131n iki farkl\u0131 yolu olan “\u015eablon Odakl\u0131 Form” ve “Model Odakl\u0131 Form” yap\u0131lar\u0131n\u0131 inceleyece\u011fiz. Genel Gereksinimler Form yap\u0131lar\u0131nda \u00e7al\u0131\u015fabilmek i\u00e7in belirli mod\u00fclleri uygulamam\u0131z\u0131n “app.module.ts” isimli ana mod\u00fcl...<\/p>\n","protected":false},"author":1,"featured_media":8132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2146,2367,2368,2366,2365],"class_list":["post-8114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-angular-4-forms","tag-angular-forms","tag-model-odakli-form","tag-sablon-odakli-form"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8114"}],"version-history":[{"count":18,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8114\/revisions"}],"predecessor-version":[{"id":8134,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8114\/revisions\/8134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8132"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}