Inserimento dati: creazione del componente

La procedura per l'inserimento di un nuovo record ricalcherà alcuni passaggi che abbiamo già affrontato, ma d'altra parte conterrà diverse novità, soprattutto per quanto riguarda la creazione del form, la validazione e l'invio dei dati. Sintetizzando possiamo schematizzare i primi passaggi nel seguente modo:

• Creazione del component.
• Aggiornamento del file di routes.
• Aggiornamento del service per l'invio dei dati al backend.
• Implementazione del component.

Procediamo con la creazione del componente, come sempre tramite la CLI:

ng g component prodotti/create-products

Nel template della lista dei prodotti avevamo già impostato un link alla url /create, si tratta ora di mapparla nel file app.routes.ts, quindi importiamo il component:

import {CreateProductsComponent} from './products/create-products/create-products.component';

Registriamo il component nel modulo principale della nostra applicazione:

import { CreateProductsComponent } from './products/create-products/create-products.component';

quindi

@NgModule({
  declarations: [
    ..
    CreateProductsComponent,
    ..

e aggiungiamo la rotta:

{path:'create', component:CreateProductsComponent},

Il nuovo metodo del nostro service conterrà invece qualche novità di rilievo, intanto proponiamo il codice:

createProduct(product){
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this._http.post(
            "http://localhost/phprest/api/v1/prodotti/",
            product,
            options
        ).map(res => res.json());
    }

La prima cosa da notare è il parametro d'ingresso che nel nostro caso sarà un oggetto JSON popolato tramite il form che costruiremo. Andiamo poi ad impostare gli headers della chiamata per specificare che si tratta, come Content-type, di un application/json. Cambia anche il metodo della chiamata: in questo caso POST e andiamo quindi a specificare l'URL della chiamata, i dati da inviare, le opzioni e quindi l'header che abbiamo definito in precedenza.

Entriamo nel vivo del nostro lavoro. Il component per la creazione e gestione del form userà due moduli che non sono presenti nel core di Angular e pertanto vanno importati separatamente: si tratta di FormsModule e di ReactiveFormsModule. Il primo è un modulo che consente la gestione dei form basandosi su template, in pratica ripercorre la stessa soluzione adottata da AngularJS, unica considerazione è che non è presente nel core di default.

L'approccio denominato ReactiveFormsModule favorisce invece la gestione dei form basati su interazioni, tipicamente sul server, e permette la scrittura di controlli customizzati.

Tornando alla classe del nostro component procediamo con le importazioni necessarie:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { ProductService } from '../../product.service';

Alcuni moduli li conosciamo già, il router verrà usato per tornare alla lista una volta inserito il record; mentre l'altra novità riguarda i moduli specifici del form: FormGroup servirà per aggregare tutti gli elementi del form in un unico oggetto, Validators per costruire i controlli, per esempio definire i campi obbligatori, mentre la classe FormBuilder ci aiuterà a gestire velocemente e senza ripetizioni il nostro form.