<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki Angular 4 Forms Uygulamalar\u0131<\/a> ba\u015fl\u0131kl\u0131 makalemde Angular’da \u015fablon odakl\u0131 ve model odakl\u0131 olmak \u00fczere iki farkl\u0131 form yap\u0131s\u0131n\u0131 incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise form do\u011frulama i\u015flemleri olan Forms Validations y\u00f6ntemlerini inceleyece\u011fiz. Lakin ilgili i\u00e7eri\u011fimizde sadece model odakl\u0131 form yap\u0131s\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulunduraca\u011f\u0131z.<\/p>\n

Hi\u00e7 vakit kaybetmeden ba\u015flayal\u0131m…<\/p>\n

Model odakl\u0131 form yap\u0131lar\u0131nda do\u011frulama\/validations i\u015flemi i\u00e7in “@angular\/forms” dizinindeki “Validators” s\u0131n\u0131f\u0131n\u0131n ilgili component s\u0131n\u0131f\u0131na import edilmesi gerekmektedir.<\/p>\n

\r\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\r\n<\/pre>\n\u015eimdi \u00f6rnek bir form tasla\u011f\u0131 olu\u015ftural\u0131m ve gerekli Validations i\u015flemlerinin nas\u0131l yap\u0131laca\u011f\u0131n\u0131 \u00fczerinden izah etmeye \u00e7al\u0131\u015fal\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 [disabled]="!frmIletisim.valid">G\u00f6nder<\/button>\r\n<\/form>\r\n<\/pre>\nFormda dikkat etmeniz gereken tek husus “button” nesnesine tan\u0131mlanan “[disabled]” \u00f6zelli\u011fidir. Birazdan component s\u0131n\u0131f\u0131nda yapaca\u011f\u0131m\u0131z validations i\u015flemlerine nazaran form \u00fczerinde ge\u00e7ersiz bir do\u011frulama s\u00f6z konusu olursa ilgili buton taa ki form do\u011frulanana kadar pasifize edilecektir.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormGroup, FormControl, Validators } 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("", Validators.compose([\r\n        Validators.required\r\n      ])),\r\n      email: new FormControl("", Validators.compose([\r\n        Validators.required,\r\n        Validators.pattern("[^ @]*@[^ @]*") \/\/Mail adresi oldu\u011funu do\u011frulayabilmek i\u00e7in.\r\n      ])),\r\n      meslek: new FormControl("", Validators.compose([\r\n        Validators.required\r\n      ])),\r\n      mesaj: new FormControl("", Validators.compose([\r\n        Validators.required\r\n      ]))\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>\nComponent s\u0131n\u0131f\u0131m\u0131zda da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere FormControl nesnelerinin constructerlar\u0131n\u0131n ikinci parametrelerinde Validators.compose<\/strong> komutuyla ilgili alana istenilen do\u011frulama ayarlamas\u0131 ger\u00e7ekle\u015ftirilmektedir. Dolay\u0131s\u0131yla model tabanl\u0131 validasyon i\u015flemi bu \u015fekilde sa\u011flanmaktad\u0131r.<\/p>\n<\/a><\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki Angular 4 Forms Uygulamalar\u0131 ba\u015fl\u0131kl\u0131 makalemde Angular’da \u015fablon odakl\u0131 ve model odakl\u0131 olmak \u00fczere iki farkl\u0131 form yap\u0131s\u0131n\u0131 incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise form do\u011frulama i\u015flemleri olan Forms Validations y\u00f6ntemlerini inceleyece\u011fiz....<\/p>\n","protected":false},"author":1,"featured_media":8143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2146,2369,2370],"class_list":["post-8136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-angular-4-forms-validations","tag-angular-4-validations"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8136","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=8136"}],"version-history":[{"count":7,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8136\/revisions"}],"predecessor-version":[{"id":8144,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8136\/revisions\/8144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8143"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}