<\/div>\n

Merhaba,<\/p>\n

Angular mimarisinde, form arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131ndan edinilen bilgileri ‘\u015eablon Odakl\u0131’ ve ‘Model Odakl\u0131’ olmak \u00fczere iki farkl\u0131 y\u00f6ntem kullanarak elde edebiliriz. Bu y\u00f6ntemlere k\u0131saca de\u011finmek gerekirse e\u011fer; ‘\u015eablon Odakl\u0131’ formlarda kullan\u0131c\u0131dan al\u0131nan bilgilerin, ‘ngModel’ etiketiyle i\u015faretlenmi\u015f html elemanlar\u0131n\u0131n ta\u015f\u0131d\u0131klar\u0131 de\u011ferlerin bir \u015fablon i\u00e7erisinde bizlere ula\u015ft\u0131r\u0131lmas\u0131yla m\u00fcmk\u00fcnken; ‘Model Odakl\u0131’ form yap\u0131lanmas\u0131nda ise ilgili formdaki t\u00fcm alanlar\u0131 temsil eden modeller ile veri ileti\u015fimi s\u00f6z konusudur. Konuya dair Angular 4 Form Uygulamalar\u0131<\/a> ba\u015fl\u0131kl\u0131 makalemizde daha detayl\u0131 bilgi edinebilirsiniz.<\/p>\n

Bu i\u00e7eri\u011fimizde \u00f6zellikle ‘Model Odakl\u0131’ form yap\u0131lanmas\u0131nda modele ba\u011flanan bir “input” nesnesine “setValue” fonksiyonu ile nas\u0131l de\u011fer atayabilece\u011fimizi inceleyece\u011fiz.<\/p>\n

Diyelim ki, elimizde a\u015fa\u011f\u0131daki gibi bir componentimiz olsun.<\/p>\n

\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormControl, FormGroup } from "@angular\/forms";\r\n\r\n@Component({\r\n  selector: 'app-contact',\r\n  templateUrl: '.\/contact.component.html',\r\n  styleUrls: ['.\/contact.component.css']\r\n})\r\nexport class ContactComponent implements OnInit {\r\n  frmContact: FormGroup;\r\n  ngOnInit() {\r\n    this.frmContact = new FormGroup({\r\n      name: new FormControl(),\r\n      surName: new FormControl(),\r\n      age: new FormControl(),\r\n      message: new FormControl()\r\n    });\r\n  }\r\n  onSubmit(frm) {\r\n    alert(`${frm.name} ${frm.surName} ${frm.age} ${frm.message}`);\r\n  }\r\n}\r\n<\/pre>\nKod blo\u011funu incelerseniz e\u011fer ilgili component i\u00e7erisinde bir model odakl\u0131 yakla\u015f\u0131m sergilenen form i\u015flemi uygulanm\u0131\u015ft\u0131r. E\u011fer ki, bu formun herhangi bir field\u0131na s\u00fcre\u00e7te farkl\u0131 bir de\u011fer set etmek istiyorsan\u0131z “setValue” fonksiyonunu kullanman\u0131z gerekmektedir.<\/p>\n\r\n    this.frmContact.controls["name"].setValue("Gen\u00e7ay");\r\n    this.frmContact.controls["surName"].setValue("Y\u0131ld\u0131z");\r\n    this.frmContact.controls["age"].setValue("26");\r\n    this.frmContact.controls["message"].setValue("laylaylom galiba sana g\u00f6re sevmeler");\r\n<\/pre>\n“setValue” fonksiyonunu yukar\u0131daki gibi “controls” \u00f6zelli\u011finden sonra kullanman\u0131z daha net ve do\u011frucu bir yakla\u015f\u0131m olacakt\u0131r.
\n<\/a><\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular mimarisinde, form arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131ndan edinilen bilgileri ‘\u015eablon Odakl\u0131’ ve ‘Model Odakl\u0131’ olmak \u00fczere iki farkl\u0131 y\u00f6ntem kullanarak elde edebiliriz. Bu y\u00f6ntemlere k\u0131saca de\u011finmek gerekirse e\u011fer; ‘\u015eablon Odakl\u0131’ formlarda kullan\u0131c\u0131dan al\u0131nan bilgilerin, ‘ngModel’...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2144,2415,2599],"tags":[2156,2703,2702,2366,2365,1406],"class_list":["post-9933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-4","category-angular-5","category-angular-6","tag-angular","tag-angular-form-setvalue","tag-angular-setvalue","tag-model-odakli-form","tag-sablon-odakli-form","tag-setvalue"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9933","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=9933"}],"version-history":[{"count":11,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9933\/revisions"}],"predecessor-version":[{"id":9945,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9933\/revisions\/9945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}