- Learn
- Applicazioni con Angular e PHP, la guida
- Creazione del form per l’inserimento dei dati
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>
Se vuoi aggiornamenti su PHP inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Massimiliano Pippi
Massimiliano Pippi ci parla di siti “vintage” generati con Python.