{"id":10462,"date":"2019-02-28T14:22:50","date_gmt":"2019-02-28T14:22:50","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=10462"},"modified":"2019-02-28T14:22:50","modified_gmt":"2019-02-28T14:22:50","slug":"angular-7-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angular-7-reactive-forms\/","title":{"rendered":"Angular 7 – Reactive Forms"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde, bir form \u00fczerinde yap\u0131lan t\u00fcm aktiviteleri dinamik bir \u015fekilde kontrol etmemizi sa\u011flayan ve Angular 7 ile gelen Reactive Forms yap\u0131lar\u0131 \u00fczerine konu\u015fuyor olaca\u011f\u0131z.<\/p>\n

Reactive Forms; form \u00fczerinde t\u00fcm input kontrolleriyle birlikte, kullan\u0131c\u0131 ile etkile\u015fime girecek ve bilgi alacak olan di\u011fer nesneleri dinleyen, bu nesneler \u00fczerinde anl\u0131k de\u011fi\u015fiklikleri takip edip bizlere ileten bir form \u00e7e\u015fididir. Ayn\u0131 zamanda etkin bir \u015fekilde forma dair olan t\u00fcm validasyonlar\u0131 i\u015fleyen ve verilsel olarak \u00f6nceden tan\u0131mlanm\u0131\u015f de\u011ferlerle elimizdeki kontroller aras\u0131nda yap\u0131lm\u0131\u015f olan data binding sayesinde yap\u0131lan t\u00fcm \u00e7al\u0131\u015fmalar\u0131n taraf\u0131m\u0131zca rahat bir \u015fekilde takip edilebilmesini sa\u011flayan bir yap\u0131ya sahiptir.<\/p>\n

Asl\u0131nda bizler bu Reactive Forms yap\u0131lar\u0131na o kadar da yabanc\u0131 de\u011filiz. \u00d6nceki Angular Forms Uygulamalar\u0131<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Angular uygulamalar\u0131nda form yap\u0131lar\u0131na de\u011finirken “Model Odakl\u0131 Formlar” ile bizzat Reactive Form yap\u0131lanmas\u0131n\u0131 ele alm\u0131\u015f bulunmaktay\u0131z.<\/p>\n

\u015eimdi gelin Angular 7 ile gelen Reactive Forms yap\u0131lar\u0131n\u0131 ba\u015ftan sona tekrar detayl\u0131ca ele alal\u0131m…
\n\u0130lk olarak \u00f6rnek bir Angular uygulamas\u0131 aya\u011fa kald\u0131ral\u0131m. Ard\u0131ndan a\u015fa\u011f\u0131daki tarifleri s\u0131ras\u0131yla uygulamaya alal\u0131m;<\/p>\n

Reactive Formlar\u0131n Uygulamaya Import Edilmesi<\/h3>\n

Uygulamam\u0131zda reactive formlar\u0131 kullanabilmek i\u00e7in yap\u0131lmas\u0131 gereken ilk i\u015fin uygulamaya ReactiveFormsModule<\/em> mod\u00fcl\u00fcn\u00fcn import edilmesidir. Bu i\u015flem i\u00e7in uygulamam\u0131z\u0131n ana mod\u00fcl\u00fcne ilgili k\u00fct\u00fcphaneyi a\u015fa\u011f\u0131daki gibi import ediyoruz.<\/p>\n

\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\nimport { ReactiveFormsModule } from "@angular\/forms";\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    ReactiveFormsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
16. sat\u0131rda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ReactiveFormsModule mod\u00fcl\u00fc uygulamaya import edilmi\u015ftir ve b\u00f6ylece uygulamada reactive formlar kullan\u0131labilir hale gelmi\u015ftir.<\/p>\n
FormBuilder Nesnesi \u0130le Reactive Formun Tasarlanmas\u0131<\/h3>\n
FormBuilder nesnesi, makalemizin ilk paragraflar\u0131ndan refere etmi\u015f oldu\u011fum makale i\u00e7eri\u011finde kulland\u0131\u011f\u0131m\u0131z “FormGroup” ve “FormControl” gibi nesneleri k\u0131sa yoldan olu\u015fturarak, basit bir \u015fekilde kompleks form yap\u0131lar\u0131 tasarlamam\u0131z\u0131 sa\u011flayan bir servistir. Kullan\u0131m\u0131 a\u015fa\u011f\u0131daki gibidir;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormBuilder, Validators, FormGroup } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'app-reactive-forms-example',\r\n  templateUrl: '.\/reactive-forms-example.component.html',\r\n  styleUrls: ['.\/reactive-forms-example.component.css']\r\n})\r\nexport class ReactiveFormsExampleComponent implements OnInit {\r\n\r\n  constructor(private formBuilder: FormBuilder) { }\r\n\r\n  frmPerson: FormGroup;\r\n  ngOnInit() {\r\n    this.frmPerson = this.formBuilder.group({\r\n      name: [""],\r\n      surname: [""],\r\n      email: [""],\r\n      age: [""]\r\n    });\r\n  }\r\n\r\n  get component() { return this.frmPerson.controls }\r\n\r\n  onSubmit(data: Person) {\r\n    console.log(data);\r\n  }\r\n}\r\n\r\nexport class Person {\r\n  constructor(public name: string, public surname: string, public email: string) {\r\n\r\n  }\r\n}\r\n<\/pre>\n
Yukar\u0131daki \u00f6rnek kod blo\u011funda 16 – 21. sat\u0131rlar aras\u0131na g\u00f6z atarsan\u0131z e\u011fer constructor’dan inject edilen FormBuilder nesnesi \u00fczerinden form modelimiz tasarlanmakta ve “FormGroup” tipinden “frmPerson” isimli de\u011fi\u015fkene atanmaktad\u0131r. Ayriyetten birazdan g\u00f6rsel k\u0131s\u0131mda ele alaca\u011f\u0131m\u0131z form binding neticesinde doldurulmu\u015f veriyi post neticesinde “onSubmit” isimli fonksiyon 34 – 37. sat\u0131rlar aras\u0131nda tan\u0131mlanan “Person” s\u0131n\u0131f\u0131 tipinden bir parametreyle otomatik mepper i\u015flemi ger\u00e7ekle\u015ftirerek kar\u015f\u0131layacakt\u0131r.<\/p>\n
FormBuilder nesnesi ile olu\u015fturmu\u015f oldu\u011fumuz bu form yap\u0131s\u0131n\u0131n html componentlerle binding i\u015flemi a\u015fa\u011f\u0131daki gibi sa\u011flanmaktad\u0131r.<\/p>\n
\r\n<div class="jumbotron">\r\n  <div class="container">\r\n    <div class="row">\r\n      <div class="col-md-6 offset-md-3">\r\n        <form [formGroup]="frmPerson" (ngSubmit)="onSubmit(frmPerson.value)">\r\n          <div class="form-group">\r\n            <label>Name<\/label>\r\n            <input type="text" formControlName="name" class="form-control" \/>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>Surname<\/label>\r\n            <input type="text" formControlName="surname" class="form-control" \/>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>E-Mail<\/label>\r\n            <input type="text" formControlName="email" class="form-control" \/>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>Age<\/label>\r\n            <input type="number" formControlName="age" class="form-control" \/>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <button class="btn btn-primary">Sign up<\/button>\r\n          <\/div>\r\n        <\/form>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
Yukar\u0131daki in\u015fay\u0131 test edersek sonu\u00e7 olarak a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi neticeyle kar\u015f\u0131la\u015f\u0131lmaktad\u0131r;
\n\"Angular<\/a><\/p>\n
\u015eimdi bu tasarlad\u0131\u011f\u0131m\u0131z forma “FormBuilder” nesnesinin sa\u011flad\u0131\u011f\u0131 kolayl\u0131ktan istifade ederek validasyon i\u015flemlerini uygulayal\u0131m.<\/p>\n
Forma Validasyon Uygulanmas\u0131<\/h3>\n
Forma validasyon uygulayabilmek i\u00e7in tasar\u0131m\u0131zda ve \u015fablonumuzda a\u015fa\u011f\u0131daki gibi baz\u0131 de\u011fi\u015fiklikler yapmam\u0131z gerekmektedir.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { FormBuilder, Validators, FormGroup } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'app-reactive-forms-example',\r\n  templateUrl: '.\/reactive-forms-example.component.html',\r\n  styleUrls: ['.\/reactive-forms-example.component.css']\r\n})\r\nexport class ReactiveFormsExampleComponent implements OnInit {\r\n\r\n  constructor(private formBuilder: FormBuilder) { }\r\n\r\n  frmPerson: FormGroup;\r\n  submitted: boolean;\r\n  ngOnInit() {\r\n    this.frmPerson = this.formBuilder.group({\r\n      name: ["",\r\n        [\r\n          Validators.required,\r\n          Validators.maxLength(10),\r\n          Validators.minLength(5)\r\n        ]],\r\n      surname: ["", Validators.required],\r\n      email: ["",\r\n        Validators.compose([\r\n          Validators.email,\r\n          Validators.required\r\n        ])],\r\n      age: ["",\r\n        [Validators.required,\r\n        Validators.max(5),\r\n        Validators.min(3)]]\r\n    });\r\n  }\r\n\r\n  get component() { return this.frmPerson.controls }\r\n\r\n  onSubmit(data: Person) {\r\n    this.submitted = true;\r\n    if (this.frmPerson.invalid)\r\n      return;\r\n    console.log(data);\r\n  }\r\n}\r\n\r\nexport class Person {\r\n  constructor(public name: string, public surname: string, public email: string) {\r\n\r\n  }\r\n}\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer validasyon i\u015flemlerinde FormBuilder nesnesinin dizi yap\u0131s\u0131ndan faydalan\u0131ld\u0131\u011f\u0131 gibi “Validators” s\u0131n\u0131f\u0131n\u0131n “compose” metoduda kullan\u0131labilmektedir.<\/p>\n
\r\n<div class="jumbotron">\r\n  <div class="container">\r\n    <div class="row">\r\n      <div class="col-md-6 offset-md-3">\r\n        <form [formGroup]="frmPerson" (ngSubmit)="onSubmit(frmPerson.value)">\r\n          <div class="form-group">\r\n            <label>Name<\/label>\r\n            <input type="text" formControlName="name" class="form-control"\r\n              [ngClass]="{'is-invalid': submitted && component.name.errors}" \/>\r\n            <div class="invalid-feedback" *ngIf="submitted && component.name.errors">\r\n              <div *ngIf="component.name.errors.required">Please do not leave your name empty.<\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>Surname<\/label>\r\n            <input type="text" formControlName="surname" class="form-control"\r\n              [ngClass]="{'is-invalid': submitted && component.surname.errors}" \/>\r\n            <div *ngIf="submitted && component.surname.errors" class="invalid-feedback">\r\n              <div *ngIf="component.surname.errors.required">Please do not leave your surname empty.<\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>E-Mail<\/label>\r\n            <input type="text" formControlName="email" class="form-control"\r\n              [ngClass]="{'is-invalid': submitted && component.email.errors}" \/>\r\n            <div *ngIf="submitted && component.email.errors" class="invalid-feedback">\r\n              <div *ngIf="component.email.errors.required">Please do not leave your email empty.<\/div>\r\n              <div *ngIf="component.email.errors.email">Please enter your e-mail address correctly.<\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <label>Age<\/label>\r\n            <input type="number" formControlName="age" class="form-control"\r\n              [ngClass]="{'is-invalid': submitted && component.age.errors}" \/>\r\n            <div *ngIf="submitted && component.age.errors" class="invalid-feedback">\r\n              <div *ngIf="component.age.errors.required">Please do not leave your age empty.<\/div>\r\n              <div *ngIf="component.age.errors.maxLength">Up to 5<\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class="form-group">\r\n            <button class="btn btn-primary">Sign up<\/button>\r\n          <\/div>\r\n        <\/form>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
\u0130lgili \u00e7al\u0131\u015fmay\u0131 sa\u011flad\u0131ktan sonra neticede a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi bir sonu\u00e7la kar\u015f\u0131la\u015f\u0131lmaktad\u0131r.
\n\"Angular<\/a><\/p>\n
Detayl\u0131 Validasyon \u0130ncelemesi<\/h3>\n
FormBuilder ile tasarlay\u0131p forma bind etti\u011fimiz yap\u0131 \u00fczerinde validasyon s\u00fcrecinin nas\u0131l ceyran etti\u011fini detayl\u0131 incelemek i\u00e7in a\u015fa\u011f\u0131daki optimizasyonu inceleyiniz;<\/p>\n
\r\n    let nameError = this.component.name.errors;\r\n    let surnameError = this.component.surname.errors;\r\n    let emailError = this.component.email.errors;\r\n    let age = this.component.age.errors;\r\n<\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere formda bind edilen herhangi bir componentin validasyonu ge\u00e7ersiz oldu\u011fu durumda bizlere “errors” \u00f6zelli\u011fi dolu gelmekte ve a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi hangi validasyonlara tak\u0131l\u0131nd\u0131\u011f\u0131yla ilgili bilgi verilmektedir.<\/p>\n\n\n\n\n\n
Kontrol<\/th>\nValidasyon<\/th>\n<\/tr>\n<\/thead>\n
\n\"Angular<\/a>\n<\/td>\n\n\"Angular<\/a>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Evet… \u0130\u015fte Angular 7 uygulamalar\u0131nda Reactive Forms yap\u0131lar\u0131 bu \u015fekilde uygulanmaktad\u0131r.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde, bir form \u00fczerinde yap\u0131lan t\u00fcm aktiviteleri dinamik bir \u015fekilde kontrol etmemizi sa\u011flayan ve Angular 7 ile gelen Reactive Forms yap\u0131lar\u0131 \u00fczerine konu\u015fuyor olaca\u011f\u0131z. Reactive Forms; form \u00fczerinde t\u00fcm input kontrolleriyle birlikte,...<\/p>\n","protected":false},"author":1,"featured_media":10506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2756],"tags":[2757,2774,2775,2773],"class_list":["post-10462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-7","tag-angular-7","tag-angular-7-reactive-forms","tag-reactive-forms","tag-reactiveformsmodule"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10462","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=10462"}],"version-history":[{"count":39,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10462\/revisions"}],"predecessor-version":[{"id":10507,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10462\/revisions\/10507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/10506"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=10462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}