Arhiva forma - Tomislav Stanković

Prikaz podataka API-ja Sudskog registra – pravosudje.hr

OBAVIJEST! API Sudskog registra se od 1. travnja prebacuje na novu adresu. Više o tome u blog postu Dohvaćanje podataka s API-ja Sudskog registra data.gov.hr

U ovom ću blog postu pokazati kako napraviti upit na API Sudskog registra i dohvatiti informacije o poslovnom subjektu prema OIB-u/MBS-a. U dokumentaciji se može vidjeti koje je sve informacije i preko kojih ruta moguće napraviti, ali ja ću se zadržati na onoj po meni najzanimljivijoj subjekt_detalji_Get.

Projekt je dostupan na GitHubu.

Uvod

Za kreiranje forme koristiti ću FormBuilder, a mogao sam isto tako koristiti i ngModel ili FormControl. Više o tome objavio sam u jednom od prijašnjih blog postova. Forma će se sastojati od nekoliko polja od kojih će većina biti obavezna. Prilikom unosa OIB-a ili MBS-a odmah ide provjera na API Sudskog registra i tek nakon te provjere moguće je kliknuti na gumb “Spremi” nakon kojega se podaci mogu spremiti u bazu podataka.

Provjera rada API-ja

Prije nego krenem s izradom Angular forme idem se uvjeriti da API radi na način kako je prikazano u dokumentaciji i da mi vraća podatke koje želim koristiti. API je moguće testirati i na ovoj adresi. Da nema te forme koristio bi Postman.

URL na koji radim upit je:

https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora={tipIdentifikatora}&identifikator={identifikator}[&expand_relations][&timestamp_id]

1	https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora={tipIdentifikatora}&identifikator={identifikator}[&expand_relations][&timestamp_id]

Obavezni parametri upita su sljedeći:

tipIdentifikatora* (string) – moguće koristiti oib (osobni identifikacijski broj) ili mbs (matični broj subjekta)
identifikator* (integer) – oib ili mbs koristim u obliku broja (int64)
Ocp-Apim-Subscription-Key* (string) – ide u header, a dobije se nakon registracije

Kreiranje API servisa

U servisu će se nalaziti dvije funkcije. Jedna će dohvaćati podatke prema OIB-u, a druga prema MBS-a.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

   httpOptions = {
    headers: new HttpHeaders({
      'Ocp-Apim-Subscription-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    })
  };

  constructor(private _http: HttpClient) { }

  sudskiRegistarOIB(oib:any) {
    return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=oib&identifikator='+oib+'&expand_relations=true', this.httpOptions)
      .pipe(map((res: any) => res ));
  }

  sudskiRegistarMBS(mbs:any) {
    return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=mbs&identifikator='+mbs+'&expand_relations=true', this.httpOptions)
      .pipe(map((res: any) => res ));
  }

}

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { map } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class ApiService {

httpOptions = {

headers: new HttpHeaders({

'Ocp-Apim-Subscription-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

})

};

constructor(private _http: HttpClient) { }

sudskiRegistarOIB(oib:any) {

return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=oib&identifikator='+oib+'&expand_relations=true', this.httpOptions)

.pipe(map((res: any) => res ));

}

sudskiRegistarMBS(mbs:any) {

return this._http.get('https://sudreg-api.pravosudje.hr/javni/subjekt_detalji?tipIdentifikatora=mbs&identifikator='+mbs+'&expand_relations=true', this.httpOptions)

.pipe(map((res: any) => res ));

}

HTML forma

Kreiram formu sa poljima:
– oib – dužina 11 znakova. Obavezno polje.
– mbs – dužina 9 znakova. Obavezno polje.
– nazivtvrtke – Obavezno polje.
– ulica – Obavezno polje.
– grad – Obavezno polje.
– e-mail

Prilikom unosa OIB-a ili MBS-a odmah se vrši provjera na API putem funkcije provjera(angularForma). Tek nakon što se forma ispuni podacima tj. kada se zadovolji unos obaveznih polja moguće je kliknuti na gumb “Spremi”.

 <form class="form-content" id="angularForma" [formGroup]="angularForma" (ngSubmit)="spremi()">
       <div class="form-header">
                 <h5 class="title">Unos poslovnog subjekta</h5>
            </div>
            <div class="form-body">
                <div class="form-group row">
                    <div class="col-sm-6">
                        <input class="form-control form-control-line" type="text" pattern="[0-9]{11}" minlength="11" maxlength="11" formControlName="oib" placeholder="OIB" (keyup)="provjera(angularForma)">
                    </div>
                    <div class="col-sm-6">
                        <input class="form-control form-control-line" type="text" pattern="[-+]?[0-9]*[.,]?[0-9]+" minlength="9" maxlength="9" formControlName="mbs" placeholder="MBS" (keyup)="provjera(angularForma)">
                    </div>
                </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="nazivtvrtke" placeholder="Naziv">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="ulica" placeholder="Adresa">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="text" formControlName="grad" placeholder="Grad">
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-line" type="email" formControlName="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail">
                    </div>
            </div>
            <div class="form-footer justify-content-between">
                <div class="text-center">
                    <button class="btn btn-primary btn-rounded" [disabled]="!angularForma.valid" type="submit">Spremi</button>
                </div>
       </div>
</form>

<h5 class="title">Unos poslovnog subjekta</h5>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button class="btn btn-primary btn-rounded" [disabled]="!angularForma.valid" type="submit">Spremi</button>

</div>

</form>

Funkcionalnost forme

Unutar ngOnInit() funkcije radim inicijalizaciju forme. Ovdje odmah dodajem i Validators kako bi mogao validirati potrebna polja i spriječiti klik na gumb “Spremi” pomoću [disabled]="!angularForma.valid" u slučaju kada forma nije ispravno ispunjena.

Kada se unutar polja forme unesu OIB ili MBS poziva se funkcija provjera(angularForma). Prvo vršim provjeru koja vrsta identifikatora (OIB ili MBS) je unesena jer ću kasnije na osnovu toga pozivati pripadajući API Sudskog registra iz ApiService i paralelno provjeravam da su ispravne dužine. Nakon toga provjeravam da unutar unesenih znakova nema slova tj. da su samo brojevi match(/^[0-9]+$/). Kada su svi navedeni uvjeti zadovoljeni pozivam this._apiService.sudskiRegistarOIB ili this._apiService.sudskiRegistarMBS te prikazujem dobivene podatke console.log(res) i odmah popunjavam formu.

Kada je forma ispravno validirana podaci će se uspješno dohvatiti.

Ne međutim, ostaje problem kod popunjavanja forme sa nasumičnim brojevima koji će ispravno biti validirani prema dužini iako ne postoje u Registru. Npr. netko za OIB može unijeti 11 nula ili za MBS 9 nula i forma će biti validna te će se taj poslovni subjekt moći spremiti u bazu podatka.

To mogu spriječiti koristeći setValue ili patchValue. Znači, ako mi API Sudskog registra ne vrati podatke neću dopustiti da forma prođe kao validna i da se uopće može kliknuti na “Spremi”.

– this.angularForma.controls['oib'].setValue(null);
– this.angularForma.controls['oib'].patchValue(null);

Što se adrese tiče stavio sam uvjet da se prikaže ispravna vrijednost neovisno o tome ima li prikazana adresa uz broj i podbroj tj. slovo (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : '') .

Npr. u adresi Dragutina Žanića Karle 27a je ‘a’ podbroj .

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { ApiService } from './api.service';

import * as toastr from 'toastr';

@Component({
  selector: 'app-angular-forma',
  templateUrl: './angular-forma.component.html',
  styleUrls: ['./angular-forma.component.css'],
  providers: [ApiService]
})
export class AngularFormaComponent implements OnInit {

  angularForma: FormGroup;

  constructor(private _fb: FormBuilder,
              private _apiService: ApiService) { }

  ngOnInit() {
    //Inicijalizacija forme
    this.angularForma = this._fb.group({
      oib: ['', [Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],
      mbs: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],
      nazivtvrtke: ['', Validators.required],
      ulica: ['', Validators.required],
      grad: ['', Validators.required],
      email: ['', Validators.email]
    }); 
  }

 provjera(angularForma){
      //OIB
      if(angularForma.value.oib && angularForma.value.oib.length == 11){
        if(angularForma.value.oib.match(/^[0-9]+$/)){
          this._apiService.sudskiRegistarOIB(angularForma.value.oib).subscribe(res => {
            console.log(res);
            if(res){
                this.angularForma = this._fb.group({
                  oib: res.oib,
                  mbs: res.mbs,
                  nazivtvrtke: res.skracene_tvrtke[0].ime,
                  ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),
                  grad: res.sjedista[0].naziv_naselja,
                  email: ''
                });
            } else {
              toastr.error("Neuspješno dohvaćanje podataka prema OIB!");
              this.angularForma.controls['oib'].setValue(null);
            }
          });
        } else {
          toastr.error("OIB mora biti u obliku broja!");
        }
      //MBS
      } else if(angularForma.value.mbs && angularForma.value.mbs.length == 9){
        if(angularForma.value.mbs.match(/^[0-9]+$/)){
          this._apiService.sudskiRegistarMBS(angularForma.value.mbs).subscribe(res => {
            console.log(res);
            if(res){
                this.angularForma = this._fb.group({
                  oib: res.oib,
                  mbs: res.mbs,
                  nazivtvrtke: res.skracene_tvrtke[0].ime,
                  ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),
                  grad: res.sjedista[0].naziv_naselja,
                  email: ''
                });
            } else {
              toastr.error("Neuspješno dohvaćanje podataka prema MBS!");
              this.angularForma.controls['mbs'].setValue(null);
            }
          });
        } else {
          toastr.error("MBS mora biti u obliku broja!");
        }
      } else {
        //
      } 
  }

  spremi(){
    console.log(this.angularForma);
  }

}

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { ApiService } from './api.service';

import * as toastr from 'toastr';

@Component({

selector: 'app-angular-forma',

templateUrl: './angular-forma.component.html',

styleUrls: ['./angular-forma.component.css'],

providers: [ApiService]

})

export class AngularFormaComponent implements OnInit {

angularForma: FormGroup;

constructor(private _fb: FormBuilder,

private _apiService: ApiService) { }

ngOnInit() {

//Inicijalizacija forme

this.angularForma = this._fb.group({

oib: ['', [Validators.required, Validators.minLength(11), Validators.maxLength(11), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],

mbs: ['', [Validators.required, Validators.minLength(9), Validators.maxLength(9), Validators.pattern('[-+]?[0-9]*[.,]?[0-9]+')]],

nazivtvrtke: ['', Validators.required],

ulica: ['', Validators.required],

grad: ['', Validators.required],

email: ['', Validators.email]

});

}

provjera(angularForma){

//OIB

if(angularForma.value.oib && angularForma.value.oib.length == 11){

if(angularForma.value.oib.match(/^[0-9]+$/)){

this._apiService.sudskiRegistarOIB(angularForma.value.oib).subscribe(res => {

console.log(res);

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracene_tvrtke[0].ime,

ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),

grad: res.sjedista[0].naziv_naselja,

email: ''

});

} else {

toastr.error("Neuspješno dohvaćanje podataka prema OIB!");

this.angularForma.controls['oib'].setValue(null);

}

});

} else {

toastr.error("OIB mora biti u obliku broja!");

}

//MBS

} else if(angularForma.value.mbs && angularForma.value.mbs.length == 9){

if(angularForma.value.mbs.match(/^[0-9]+$/)){

this._apiService.sudskiRegistarMBS(angularForma.value.mbs).subscribe(res => {

console.log(res);

if(res){

this.angularForma = this._fb.group({

oib: res.oib,

mbs: res.mbs,

nazivtvrtke: res.skracene_tvrtke[0].ime,

ulica: res.sjedista[0].ulica + ' ' + res.sjedista[0].kucni_broj + (res.sjedista[0].kucni_podbroj ? (res.sjedista[0].kucni_podbroj) : ''),

grad: res.sjedista[0].naziv_naselja,

email: ''

});

} else {

toastr.error("Neuspješno dohvaćanje podataka prema MBS!");

this.angularForma.controls['mbs'].setValue(null);

}

});

} else {

toastr.error("MBS mora biti u obliku broja!");

}

} else {

}

spremi(){

console.log(this.angularForma);

}

Ionic 3 – Korištenje, napredne, reaktivne forme

Objavio sam već nekoliko blog postova u kojima sam koristio obične, template-driven, forme dok ću u ovom blog postu pokazati primjer korištenja reaktivne forme tzv. reactive forms.

Postavljanje aplikacije

Za početak je potrebno kreirati novu Ionic aplikaciju.

$ ionic start Ionic3ReaktivnaForma blank
$ cd Ionic3ReaktivnaForma

1 2	$ ionic start Ionic3ReaktivnaForma blank $ cd Ionic3ReaktivnaForma

S obzirom da ćemo ovdje koristiti reaktivne forme u module moramo dodati ReactiveFormsModule. To ćemo učiniti na način da u app.module.ts dodamo import { ReactiveFormsModule } from '@angular/forms'; .

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

ReactiveFormsModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Kreiranje reaktivne forme

Sada smo spremni za kreiranje reaktivne forme na stranici home.html tj. home.ts.

Forma će se sastojati od tri polja (korisničko ime, e-mail i lozinka). Sada možemo kreirati izgled reaktivne forme.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>
</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Logika će se nalaziti unutar home.ts. Ovdje imamo objekt korisnik i funkciju posaljiPodatke(korisnik){};.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController) {
     this.korisnik = new FormGroup({
      korisnicko_ime: new FormControl(''),
      email: new FormControl(''),
      lozinka: new FormControl('')
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController) {

this.korisnik = new FormGroup({

korisnicko_ime: new FormControl(''),

email: new FormControl(''),

lozinka: new FormControl('')

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Ako sada pokrenemo aplikaciju dobit ćemo sljedeće

Iako se ovo još uvijek puno ne razlikuje od primjera formi koje smo koristili u prijašnjim blog postovima ipak se kreće u smjeru onoga što s reaktivnim formama možemo i želimo postići. Više o tome u nastavku.

Napredne mogućnosti (FormBuilder)

Kako bi unutar naše forme kasnije mogli koristiti napredne mogućnosti dodatno ćemo prilagoditi logiku unutar home.ts datoteke na način da ćemo dodati FormBuilder klasu. Ako sada pokrenemo aplikaciju rezultat će biti isti kao na slici iznad.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: ['']
    });
  }

  posaljiPodatke(korisnik){
    console.log(korisnik);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: ['']

});

}

posaljiPodatke(korisnik){

console.log(korisnik);

console.log(korisnik._value);

}

Proširivanje mogućnosti forme (FormArray)

Dodatna funkcionalnost naše forme stižu u obliku FormArray klase.

FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Sada ćemo proširiti funkcionalnost naše forme iz primjera iznad na način da ćemo dodati mogućnost unosa adrese i kućnog broja. Posebno zanimljiva će biti mogućnost dodavanja više adresa unutar iste forme tj. kreiranje niza adresa.

Unutar postojećeg objekta korisnik dodajemo niz adrese. Također, dodajemo i funkcije za dodavanje nove adrese dodajAdresu(); tj. brisanje adrese obrisiAdresu(i);.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: [''],
      email: [''],
      lozinka: [''],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: [''],

email: [''],

lozinka: [''],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._value);

}

Prema tome i izgled forme smo morali prilagoditi. Ovdje nikako se smijemo zaboraviti dodati type="button" za gumbe za dodavanje i brisanje adrese jer ćemo u suprotnom dobiti vrlo zanimljive nuspojave, a to ne želimo.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="text" formControlName="lozinka"></ion-input>
   </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit">Spremi</button>
  </form>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="text" formControlName="lozinka"></ion-input>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit">Spremi</button>

</form>

</ion-content>

Ako sada pokrenemo aplikaciju forma će izgledati ovako

Validacija forme

U našoj trenutnoj formi možemo u bilo koje polje unijeti bilo koju vrijednost jer nemamo nikakvu vrstu provjere tih vrijednosti. Sada ćemo to omogućiti koristeći Validators klasu.

Korisničko ime mora biti duže od 3 znaka, email mora imati ispravan oblik tj. mora sadržavati znak ‘@’, a lozinka ne smije biti duža od 9 znakova.

U našoj komponenti to izgleda ovako:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });
  }

  dohvatiAdresu(){
    return this._fb.group({
       ulica: [''],
       broj: ['']
    });
  }

  dodajAdresu(){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.push(this.dohvatiAdresu());
  }

  obrisiAdresu(i:number){
     const control = <FormArray>this.korisnik.controls['adrese'];
     control.removeAt(i);
  }

  posaljiPodatke(korisnik){
    console.log(korisnik._status);
    console.log(korisnik._value);
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [Validators.required, Validators.email]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

dohvatiAdresu(){

return this._fb.group({

ulica: [''],

broj: ['']

});

}

dodajAdresu(){

const control = <FormArray>this.korisnik.controls['adrese'];

control.push(this.dohvatiAdresu());

}

obrisiAdresu(i:number){

const control = <FormArray>this.korisnik.controls['adrese'];

control.removeAt(i);

}

posaljiPodatke(korisnik){

console.log(korisnik._status);

console.log(korisnik._value);

}

Dok forma nije validna korisnik ne smije imati mogućnost slanja podataka tj. mora mu se onemogućiti klik na gumb za slanje/spremanje podatka [disabled]="korisnik.invalid".

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Reaktivna forma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <form [formGroup]="korisnik" (ngSubmit)="posaljiPodatke(korisnik)">
<ion-list>
   <ion-item>
     <ion-label stacked>Korisničko ime</ion-label>
     <ion-input type="text" formControlName="korisnicko_ime"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>
      <p>Korisničko ime treba biti duže od 3 znaka!</p>
    </ion-item>
    <ion-item>
     <ion-label stacked>E-mail</ion-label>
     <ion-input type="text" formControlName="email"></ion-input>
   </ion-item>
    <ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>
      <p>E-mail nije ispravan!</p>
    </ion-item>
     <ion-item>
     <ion-label stacked>Lozinka</ion-label>
     <ion-input type="password" formControlName="lozinka"></ion-input>
   </ion-item>
      <ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>
      <p>Lozinka ne može biti duža od 9 znakova!</p>
      </ion-item>

   <ion-list formArrayName="adrese" no-lines>
     <div *ngFor="let adresa of korisnik.controls.adrese.controls; let i=index">
       <div [formGroupName]="i">
         <ion-item>
           <ion-label stacked>Adresa {{i + 1}}</ion-label>
           <ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>
           <ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>
         </ion-item>
          <div text-center>
          <button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>
          </div>
       </div>
     </div>
      <div text-center>
      <button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>
       </div>
   </ion-list>

</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Reaktivna forma

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label stacked>Korisničko ime</ion-label>

<ion-input type="text" formControlName="korisnicko_ime"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.korisnicko_ime.invalid && korisnik.controls.korisnicko_ime.dirty" no-lines>

<p>Korisničko ime treba biti duže od 3 znaka!</p>

</ion-item>

<ion-item>

<ion-label stacked>E-mail</ion-label>

<ion-input type="text" formControlName="email"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.email.invalid && korisnik.controls.email.dirty" no-lines>

<p>E-mail nije ispravan!</p>

</ion-item>

<ion-item>

<ion-label stacked>Lozinka</ion-label>

<ion-input type="password" formControlName="lozinka"></ion-input>

</ion-item>

<ion-item *ngIf="korisnik.controls.lozinka.invalid && korisnik.controls.lozinka.dirty" no-lines>

<p>Lozinka ne može biti duža od 9 znakova!</p>

</ion-item>

<ion-list formArrayName="adrese" no-lines>

<ion-item>

<ion-label stacked>Adresa {{i + 1}}</ion-label>

<ion-input type="text" formControlName="ulica" placeholder="Ulica..."></ion-input>

<ion-input type="text" formControlName="broj" placeholder="Kućni broj..."></ion-input>

</ion-item>

<button ion-button outline small (click)="obrisiAdresu(i)" type="button" color="danger">Obriši adresu</button>

</div>

<button ion-button outline small (click)="dodajAdresu()" type="button" color="secondary">Dodaj adresu</button>

</div>

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Forma sada izgleda ovako

Kreiranje prilagođenog validatora

Ovisno o potrebama moguće je napraviti i prilagođene validatore. Npr. ako pogledate validator za e-mail adresu iz gornjeg primjera možete vidjeti da on dopušta unos e-mail adrese sa nastavkom (.com) koji ima više od 3 znaka. Zato ćemo mi sada napraviti prilagođeni validator koji će takvu adresu označiti kao neispravnu.

Unutar mape Ionic3ReaktivnaForma\src\ kreirati ćemo novu mapu \validators\ sa datotekom email.ts

import { FormControl } from '@angular/forms';

export class EmailValidator {
    static isValid(control: FormControl){
        const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

        if (res) {
            return null;
        }

        return {'invalidEmail': true};
    }
}

import { FormControl } from '@angular/forms';

export class EmailValidator {

static isValid(control: FormControl){

const res = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(control.value);

if (res) {

return null;

}

return {'invalidEmail': true};

}

Prema tome možemo prilagoditi i home.ts datoteku

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  korisnik: FormGroup;
  changeLog: string[] = [];

  constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

  }

...

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

import { EmailValidator } from './../../validators/email';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

korisnik: FormGroup;

changeLog: string[] = [];

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

}

...

Validacija e-mail polja sada izgleda ovako

Bonus – provjera tijekom unosa

Još jedna od mogućnosti koju možete koristiti je i provjera unešenih podataka u polje forme u trenutku unosa. U ovom ćemo primjeru provjeravati samo polje koje se tiče unosa korisničkog imena.

...
 constructor(public _navCtrl: NavController,
              private _fb: FormBuilder) {
    this.korisnik = this._fb.group({
      korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [EmailValidator.isValid]],
      lozinka: ['', [Validators.required, Validators.maxLength(9)]],
      adrese: this._fb.array([
         this.dohvatiAdresu()
      ])
    });

    const nameControl = this.korisnik.get('korisnicko_ime');
    nameControl.valueChanges.forEach(
      (value: string) => this.changeLog.push(value)
    );

  }
...

...

constructor(public _navCtrl: NavController,

private _fb: FormBuilder) {

this.korisnik = this._fb.group({

korisnicko_ime: ['', [Validators.required, Validators.minLength(3)]],

email: ['', [EmailValidator.isValid]],

lozinka: ['', [Validators.required, Validators.maxLength(9)]],

adrese: this._fb.array([

this.dohvatiAdresu()

])

});

const nameControl = this.korisnik.get('korisnicko_ime');

nameControl.valueChanges.forEach(

(value: string) => this.changeLog.push(value)

);

}

...

Na formi ćemo to prikazati na sljedeći način:

...
</ion-list>
  <button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>
  </form>

<div *ngFor="let ime of changeLog">{{ ime }}</div>

</ion-content>

...

</ion-list>

<button ion-button full type="submit" [disabled]="korisnik.invalid">Spremi</button>

</form>

</ion-content>

Na kraju to izgleda ovako:

Zaključak

Ovisno o potrebama koristiti ćete reactive ili template-driven forme. Ne postoji bolje ili lošije rješenje jer sve ovisi što vam u kojem trenutku treba.

Ako trebate napraviti jednostavniju tj. manju formu možete bez problema koristiti template-driven formu. To su forme koje sadržavaju [(ngModel)]="objekt".

Kada počnete raditi veće i kompleksnije forme svakako se prebacite na reactive forme. Jednostavnije ih je održavati i testirati plus što se sva logika nalazi na jednom mjestu.