{"id":6097,"date":"2017-10-01T18:53:59","date_gmt":"2017-10-01T16:53:59","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=6097"},"modified":"2019-01-05T19:52:48","modified_gmt":"2019-01-05T17:52:48","slug":"ionic-3-reaktivna-forma","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-3-reaktivna-forma\/","title":{"rendered":"Ionic 3 – Kori\u0161tenje, napredne, reaktivne forme"},"content":{"rendered":"

Objavio sam ve\u0107 nekoliko blog postova<\/a> u kojima sam koristio obi\u010dne<\/a>, template-driven<\/a><\/em>, forme dok \u0107u u ovom blog postu pokazati primjer kori\u0161tenja reaktivne forme tzv. reactive forms<\/em>.<\/p>\n

Postavljanje aplikacije<\/h2>\n

Za po\u010detak je potrebno kreirati novu Ionic<\/em> aplikaciju.<\/p>\n

$ ionic start Ionic3ReaktivnaForma blank\r\n$ cd Ionic3ReaktivnaForma <\/pre>\n
S obzirom da \u0107emo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule<\/a><\/em>. To \u0107emo u\u010diniti na na\u010din da u app.module.ts<\/strong> dodamo import { ReactiveFormsModule } from ‘@angular\/forms’;<\/span> .<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { ErrorHandler, NgModule } from '@angular\/core';\r\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\n\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\n\r\nimport { ReactiveFormsModule } from '@angular\/forms';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    ReactiveFormsModule,\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler}\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n
Kreiranje reaktivne forme<\/h2>\n
Sada smo spremni za kreiranje reaktivne forme na stranici home.html<\/strong> tj. home.ts<\/strong>.<\/p>\n
Forma \u0107e se sastojati od tri polja (korisni\u010dko ime, e-mail i lozinka). Sada mo\u017eemo kreirati izgled reaktivne forme.<\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Ionic3 - Reaktivna forma\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n <form [formGroup]=\"korisnik\" (ngSubmit)=\"posaljiPodatke(korisnik)\">\r\n<ion-list>\r\n   <ion-item>\r\n     <ion-label stacked>Korisni\u010dko ime<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"korisnicko_ime\"><\/ion-input>\r\n   <\/ion-item>\r\n    <ion-item>\r\n     <ion-label stacked>E-mail<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"email\"><\/ion-input>\r\n   <\/ion-item>\r\n     <ion-item>\r\n     <ion-label stacked>Lozinka<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"lozinka\"><\/ion-input>\r\n   <\/ion-item>\r\n<\/ion-list>\r\n  <button ion-button full type=\"submit\">Spremi<\/button>\r\n  <\/form>\r\n<\/ion-content><\/pre>\n
Logika \u0107e se nalaziti unutar home.ts<\/strong>. Ovdje imamo objekt korisnik<\/span> i funkciju posaljiPodatke(korisnik){};<\/span>.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\nimport { FormControl, FormGroup } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  \r\n  korisnik: FormGroup;\r\n\r\n  constructor(public _navCtrl: NavController) {\r\n     this.korisnik = new FormGroup({\r\n      korisnicko_ime: new FormControl(''),\r\n      email: new FormControl(''),\r\n      lozinka: new FormControl('')\r\n    });\r\n  }\r\n\r\n  posaljiPodatke(korisnik){\r\n    console.log(korisnik);\r\n    console.log(korisnik._value);\r\n  }\r\n\r\n}<\/pre>\n
Ako sada pokrenemo aplikaciju dobit \u0107emo sljede\u0107e<\/p>\n
\"Ionic<\/a><\/p>\n
Iako se ovo jo\u0161 uvijek puno ne razlikuje od primjera formi koje smo koristili u prija\u0161njim blog postovima<\/a> ipak se kre\u0107e u smjeru onoga \u0161to s reaktivnim formama mo\u017eemo i \u017eelimo posti\u0107i. Vi\u0161e o tome u nastavku. <\/p>\n
Napredne mogu\u0107nosti (FormBuilder)<\/h2>\n
Kako bi unutar na\u0161e forme kasnije mogli koristiti napredne mogu\u0107nosti dodatno \u0107emo prilagoditi logiku unutar home.ts<\/strong> datoteke na na\u010din da \u0107emo dodati FormBuilder<\/em><\/a> klasu. Ako sada pokrenemo aplikaciju rezultat \u0107e biti isti kao na slici iznad. <\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\nimport { FormControl, FormGroup, FormBuilder } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  \r\n  korisnik: FormGroup;\r\n\r\n  constructor(public _navCtrl: NavController,\r\n              private _fb: FormBuilder) {\r\n    this.korisnik = this._fb.group({\r\n      korisnicko_ime: [''],\r\n      email: [''],\r\n      lozinka: ['']\r\n    });\r\n  }\r\n\r\n  posaljiPodatke(korisnik){\r\n    console.log(korisnik);\r\n    console.log(korisnik._value);\r\n  }\r\n\r\n}<\/pre>\n
Pro\u0161irivanje mogu\u0107nosti forme (FormArray)<\/h2>\n
Dodatna funkcionalnost na\u0161e forme sti\u017eu u obliku FormArray<\/a><\/em> klase. <\/p>\n
FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl<\/a> and FormGroup<\/a>.<\/p><\/blockquote>\n
Sada \u0107emo pro\u0161iriti funkcionalnost na\u0161e forme iz primjera iznad na na\u010din da \u0107emo dodati mogu\u0107nost unosa adrese i ku\u0107nog broja. Posebno zanimljiva \u0107e biti mogu\u0107nost dodavanja vi\u0161e adresa unutar iste forme tj. kreiranje niza adresa. <\/p>\n
Unutar postoje\u0107eg objekta korisnik<\/span> dodajemo niz adrese<\/span>. Tako\u0111er, dodajemo i funkcije za dodavanje nove adrese dodajAdresu();<\/span> tj. brisanje adrese obrisiAdresu(i);<\/span>. <\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\nimport { FormControl, FormGroup, FormBuilder, FormArray } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  \r\n  korisnik: FormGroup;\r\n\r\n  constructor(public _navCtrl: NavController,\r\n              private _fb: FormBuilder) {\r\n    this.korisnik = this._fb.group({\r\n      korisnicko_ime: [''],\r\n      email: [''],\r\n      lozinka: [''],\r\n      adrese: this._fb.array([\r\n         this.dohvatiAdresu()\r\n      ])\r\n    });\r\n  }\r\n\r\n  dohvatiAdresu(){\r\n    return this._fb.group({\r\n       ulica: [''],\r\n       broj: ['']\r\n    });\r\n  }\r\n\r\n  dodajAdresu(){\r\n     const control = <FormArray>this.korisnik.controls['adrese'];\r\n     control.push(this.dohvatiAdresu());\r\n  }\r\n\r\n  obrisiAdresu(i:number){\r\n     const control = <FormArray>this.korisnik.controls['adrese'];\r\n     control.removeAt(i);\r\n  }\r\n\r\n  posaljiPodatke(korisnik){\r\n    console.log(korisnik._value);\r\n  }\r\n\r\n}<\/pre>\n
Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type=”button”<\/span> za gumbe za dodavanje i brisanje adrese jer \u0107emo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne \u017eelimo.<\/p>\n
<ion-header>\r\n  <ion-navbar>\r\n    <ion-title>\r\n      Ionic3 - Reaktivna forma\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n <form [formGroup]=\"korisnik\" (ngSubmit)=\"posaljiPodatke(korisnik)\">\r\n<ion-list>\r\n   <ion-item>\r\n     <ion-label stacked>Korisni\u010dko ime<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"korisnicko_ime\"><\/ion-input>\r\n   <\/ion-item>\r\n    <ion-item>\r\n     <ion-label stacked>E-mail<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"email\"><\/ion-input>\r\n   <\/ion-item>\r\n     <ion-item>\r\n     <ion-label stacked>Lozinka<\/ion-label>\r\n     <ion-input type=\"text\" formControlName=\"lozinka\"><\/ion-input>\r\n   <\/ion-item>\r\n\r\n   <ion-list formArrayName=\"adrese\" no-lines>\r\n     <div *ngFor=\"let adresa of korisnik.controls.adrese.controls; let i=index\">\r\n       <div [formGroupName]=\"i\">\r\n         <ion-item>\r\n           <ion-label stacked>Adresa {{i + 1}}<\/ion-label>\r\n           <ion-input type=\"text\" formControlName=\"ulica\" placeholder=\"Ulica...\"><\/ion-input>\r\n           <ion-input type=\"text\" formControlName=\"broj\" placeholder=\"Ku\u0107ni broj...\"><\/ion-input>\r\n         <\/ion-item>\r\n          <div text-center>\r\n          <button ion-button outline small (click)=\"obrisiAdresu(i)\" type=\"button\" color=\"danger\">Obri\u0161i adresu<\/button>\r\n          <\/div>\r\n       <\/div>\r\n     <\/div>\r\n      <div text-center>\r\n      <button ion-button outline small (click)=\"dodajAdresu()\" type=\"button\" color=\"secondary\">Dodaj adresu<\/button>\r\n       <\/div>\r\n   <\/ion-list>\r\n\r\n<\/ion-list>\r\n  <button ion-button full type=\"submit\">Spremi<\/button>\r\n  <\/form>\r\n<\/ion-content><\/pre>\n
Ako sada pokrenemo aplikaciju forma \u0107e izgledati ovako<\/p>\n
\"Ionic<\/a><\/p>\n
Validacija forme<\/h2>\n
U na\u0161oj trenutnoj formi mo\u017eemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada \u0107emo to omogu\u0107iti koriste\u0107i Validators<\/a><\/em> klasu.<\/p>\n
Korisni\u010dko ime mora biti du\u017ee od 3 znaka, email mora imati ispravan oblik tj. mora sadr\u017eavati znak ‘@’, a lozinka ne smije biti du\u017ea od 9 znakova.<\/p>\n
U na\u0161oj komponenti to izgleda ovako:<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\n\r\nimport { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n  \r\n  korisnik: FormGroup;\r\n  changeLog: string[] = [];\r\n\r\n  constructor(public _navCtrl: NavController,\r\n              private _fb: FormBuilder) {\r\n    this.korisnik = this._fb.group({\r\n      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],\r\n      email: ['', [Validators.required, Validators.email]],\r\n      lozinka: ['', [Validators.required, Validators.maxLength(9)]],\r\n      adrese: this._fb.array([\r\n         this.dohvatiAdresu()\r\n      ])\r\n    });\r\n  }\r\n\r\n  dohvatiAdresu(){\r\n    return this._fb.group({\r\n       ulica: [''],\r\n       broj: ['']\r\n    });\r\n  }\r\n\r\n  dodajAdresu(){\r\n     const control = <FormArray>this.korisnik.controls['adrese'];\r\n     control.push(this.dohvatiAdresu());\r\n  }\r\n\r\n  obrisiAdresu(i:number){\r\n     const control = <FormArray>this.korisnik.controls['adrese'];\r\n     control.removeAt(i);\r\n  }\r\n\r\n  posaljiPodatke(korisnik){\r\n    console.log(korisnik._status);\r\n    console.log(korisnik._value);\r\n  }\r\n\r\n}<\/pre>\n
Dok forma nije validna korisnik ne smije imati mogu\u0107nost slanja podataka tj. mora mu se onemogu\u0107iti klik na gumb za slanje\/spremanje podatka [disabled]=”korisnik.invalid”<\/span>.<\/p>\n
\r\n  \r\n    \r\n      Ionic3 - Reaktivna forma\r\n    <\/ion-title>\r\n  <\/ion-navbar>\r\n<\/ion-header>\r\n\r\n\r\n 
\r\n\r\n   \r\n     Korisni\u010dko ime<\/ion-label>\r\n     <\/ion-input>\r\n   <\/ion-item>\r\n    \r\n      
Korisni\u010dko ime treba biti du\u017ee od 3 znaka!<\/p>\r\n    <\/ion-item>\r\n    \r\n     E-mail<\/ion-label>\r\n     <\/ion-input>\r\n   <\/ion-item>\r\n    \r\n      
E-mail nije ispravan!<\/p>\r\n    <\/ion-item>\r\n     \r\n     Lozinka<\/ion-label>\r\n     <\/ion-input>\r\n   <\/ion-item>\r\n      \r\n      
Lozinka ne mo\u017ee biti du\u017ea od 9 znakova!<\/p>\r\n      <\/ion-item>\r\n\r\n   \r\n     
\r\n       
\r\n         \r\n           Adresa {{i + 1}}<\/ion-label>\r\n           <\/ion-input>\r\n           <\/ion-input>\r\n         <\/ion-item>\r\n          
\r\n