Creazione del form per l’inserimento dei dati

Nella nostra classe iniziamo a definire il form:

create_product_form: FormGroup;

Al costruttore, con visibilità private passiamo tutti i moduli importati e andiamo a creare i controlli sul form, ci limiteremo a rendere obbligatori tutti i campi del modulo:

constructor(
        private router:Router,
        private productService: ProductService,
        private formBuilder: FormBuilder
    ){
        this.create_product_form = formBuilder.group({
            nome: ["", Validators.required],
            prezzo: ["", Validators.required],
            descrizione: ["", Validators.required],
            categoria_id: ["", Validators.required]
        });
    }

Passiamo al template HTML, la prima parte del codice è il contenitore del form con un link per ritornare alla lista prodotti:

<section>
  <div class="row m-b-18px">
    <div class="col-md-12">
      <a routerLink="/home" class='btn btn-primary pull-right'>
        <span class='glyphicon glyphicon-list'></span> Lista Prodotti
      </a>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">

Ora inseriamo il form:

;

<form [formGroup]="create_product_form" (ngSubmit)="createProduct()">

L’attributo [formGroup] serve per legare l’HTML al nostro component e in coincidenza con l’evento submit chiameremo un metodo createProduct() che poi definiremo nella nostra classe.

Inseriamo il primo campo di input:

<table class="table table-hover table-responsive table-bordered">
          <tr>
            <td>Nome</td>
            <td>
              <input
                      formControlName="nome"
                      name="nome" type="text"
                      class="form-control" />

dove si deve notare l’attributo formControlName che serve per legare questo campo di input al gestore di Angular. Infine implementiamo la gestione del messaggio di errore che verrà mostrato quando c’è stata un’interazione con il campo di input e il validatore segnalerà un errore:

<div
                      *ngIf="create_product_form.get('nome').touched && create_product_form.get('nome').hasError('required')"
                      class="alert alert-danger">
                Nome è obbligatorio.
              </div>

I due campi restanti seguiranno lo stesso principio:

<tr>
            <td>Prezzo</td>
            <td>
              <input
                      formControlName="prezzo"
                      type="number" name="prezzo"
                      class="form-control" required />
              <div
                      *ngIf="create_product_form.get('prezzo').touched && create_product_form.get('prezzo').hasError('required')"
                      class="alert alert-danger">
                Prezzo è obbligatorio.
              </div>
            </td>
          </tr>
          <tr>
            <td>Descrizione</td>
            <td>
            <textarea
                    formControlName="descrizione"
                    name="descrizione" class="form-control" required></textarea>
              <div
                      *ngIf="create_product_form.get('descrizione').touched && create_product_form.get('descrizione').hasError('required')"
                      class="alert alert-danger">
                Descrizione è obbligatorio.
              </div>
            </td>
          </tr>