Front End
Validazione e invio daiti form in angular

Invio di un form con validazione dati in Angular

Frank Vessia
13 nov 2020
Tempo di lettura: 7 minuti, 29 secondi

Usiamo Angular e php per inviare dati di un form con validazione


Un tutorial molto semplice e basilare che ci consente di gestire un form html con angular, validazione semplice dei campi e post in php. Questo esempio rappresenta un punto di partenza per capire la logica di Angular e come strutturare un'app.

Prova il risultato finale QUI

In totale avremo tre file principali, il form html, il controller Angular e il file php che riceve i dati del form. Al contrario di altri framework javascript (per esempio jQuery) non abbiamo bisogno di librerie esterne per la validazione dei dati, infatti Angular ci fornisce una serie di metodi e helpers per gestire diversi casi di validazione, in questo esempio vediamo come impostare una validazione di base di 3 campi, due di testo e uno email.

Per prima cosa definiamo i markup, ovvero la pagina con il form html, dove includeremo Angular, tramite CDN esterno

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>

e Bootstrap che useremo come framework css

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" crossorigin="anonymous">

Includeremo anche due file personalizzati, un file javascript (form.js) dove inseriremo il controller e un file css (style.css) dove aggiungeremo alcune classi per gestire gli errori della validazione.

Il form avrà solo tre campi, nome, cognoem e email. L'html finale risulterà così:

<html ng-app="simpleForm">
    <head>
        <title>Angular form con validazione e submit in php</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="./style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
        <script src="./form.js"></script>
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col"></div>
                <div class="col" ng-controller="formController">
                    <h2 class="text-center">ANGULAR FORM + PHP</h2>
                    <hr />
                    <form method="post" name="myForm" novalidate>
                        <div class="mb-3">
                            <label for="nome">Nome</label>
                            <input type="text" name="nome" ng-model="nome" class="form-control" required="" />
                            <div ng-show="myForm.$submitted || myForm.nome.$touched" class="error">
                                <div ng-show="myForm.nome.$error.required">Inserisci il Nome.</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="cognome">Cognome</label>
                            <input type="text" name="cognome" ng-model="cognome" class="form-control" required="" />
                            <div ng-show="myForm.$submitted || myForm.cognome.$touched" class="error">
                                <div ng-show="myForm.cognome.$error.required">Inserisci il Cognome.</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="email">Email</label>
                            <input type="email" name="email" ng-model="email" class="form-control" required="" />
                            <div ng-show="myForm.$submitted || myForm.email.$touched" class="error">
                                <div ng-show="myForm.email.$error.required">Inserisci l'email.</div>
                                <div ng-show="myForm.email.$error.email">Inserisci una email valida.</div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-dark" ng-disabled="myForm.$invalid" ng-click="formsubmit(myForm.$valid)">Invia</button>

                    </form>
                    
                    <pre ng-model="result">{{result}}</pre>
                
                </div>
                <div class="col"></div>
            </div>
        </div>
    </body>
</html>

Analizziamo il codice passo passo

L'html di questa pagina è molto basilare e il markup principale fa uso delle classi di Bootstrap per generare un form responsive, quello che a noi interessa sono gli elementi necessari a Angular per inizializzare l'app, interpretare il form e validare le 3 input.

Per prima cosa dobbiamo definire il nome della nostra app, nel tag html ho inserito quindi: ng-app="simpleForm". Successivamente, nel div che racchiude il form ho anche specificato il nome del controller con ng-controller="formController".

Il form non ha impostato l'action poichè lo inseriremo nel file controller javascript "form.js", tuttavia per evitare che la validazione html5 interferisca con quella di Angular ho impostato la proprietà novalidate. Per quanto riguarda le input, tutte hanno la proprietà required che appunto indica che il campo è obbligatorio e anche il parametro ng-model che assegna il nome alla input che verrà gestito da Angular.

Importante sono i div al di sotto di ogni input, questi gestiscono la validazione, vediamone uno in dettaglio:

<div ng-show="myForm.$submitted || myForm.nome.$touched" class="error">
    <div ng-show="myForm.nome.$error.required">Inserisci il Nome.</div>
</div>

Il div esterno tramite il campo ng-show verifica che il form sia stato inviato oppure che la input sia stata "toccata", sia col focus del mouse sia col dito, in caso di navigazione da mobile. In entrambi i casi il div viene mostrato, mentre il div interno gestisce il tipo di validazione che andrà a verificare, in questo caso verifica soltanto che il campo è obbligatorio e se vuoto, il div viene mostrato e il testo di errore appare.
Si possono impostare diverse validazioni, per esempio la lunghezza minima o massima in caratteri, ed è possibile inserire un div sotto l'altro dentro il div principale, in modo che ogni validazione sia indipendente e mostri il suo messaggio personalizzato, come nel caso dell'email:

<div ng-show="myForm.email.$error.required">Inserisci l'email.</div>
<div ng-show="myForm.email.$error.email">Inserisci una email valida.</div>

Le validazioni sono pronte, non ci resta che gestire il bottone di invio con due proprietà, ng-disable="myForm.$invalid" che rendono il bottone non cliccabile fino a che il form non sarà validato e ng-click="formsubmit(myForm.$valid)" con la quale definiamo la funzione che eseguirà il submit del form (nel file form.js), se validato.

Per lo scopo di questo tutoral, quindi non necessario in un caso reale, ho inserito un altro elemento, per mostrare i dati inviati dal form, <pre ng-model="result">{{result}}</pre>.

Il controller javascript

La parte html del form è pronta, ora dobbiamo scrivere il nostro file javascript form.js che si occuperò di far funzionare tutto. Vediamo come è composto e dopo analizziamo il codice:

var app = angular.module('simpleForm', []);

app.controller("formController", ['$scope', '$http', function($scope, $http) {
    $scope.url = './submit.php';
    $scope.formsubmit = function(isValid) {

        if (isValid) {
            
            $http.post($scope.url, { "nome": $scope.nome, "cognome": $scope.cognome, "email": $scope.email }).then(function successCallback(response) {
                var data = response.data;
                $scope.result = data; // mostra i dati dentro <pre> posto dopo il form
            }, function errorCallback(response) {
                console.log('Errore: '.response);
            });

        }else{
            alert('Il form non è valido, controllare i dati inseriti e riprovare.');
        }

    }
}]);

Sono soltato venti righe di codice, immagina in jQuery quanto avresti dovuto scrivere, oltre che includere una libreria esterna per la validazione.

Per prima cosa definiamo il nome della nostra app con il nome che abbiamo messo anche nell'html. Assegnamo il controller, definendo il nome, e i parametri $scope e $http. $scope non è altro che un collegamento tra la nostra app e la vista front end, con scope possiamo assegnare variabili internamente oppure prenderle dalla vista, per esempio le nostr input saranno automaticamente utilizzabili nel codice tramite $scope.nome o $scope.email.

$http invece è un servizio interno di Angular che si occupa di gestire le comunicazioni remote tra server utilizzando XMLHttpRequest o via JSONP del browser.

Adesso definiamo l'action del form, tramite il parametro url, in questo caso è un semplice file php che riceverà i dati e li mostrerà nuovamente. Ci connettiamo al submit del form del nostro bottone e se il form è validato entriamo nell'if ed eseguiamo il post dei dati, passando la url a cui inviare i dati, i parametri, nome e valore e in casi di invio riuscito con successo entriamo nella callback successCallback che nel nostro caso di esempio prende i dati ricevuti dal file php e cui abbiamo inviato il form e li visualizza nel tag <pre> che abbiamo messo alla fine del form, sostutiendo la variabile {{result}}.

Il file php che riceve i dati, come detto prima, non fa altro che interpretare i parametri ricevuti dal post, decodificarli tramite json_decode e risputarli per il semplice scopo dell'esempio, ovviamente in un caso reale il php andrà a compiere tutte le operazioni necessarie, tipo inviare una email o salvare tutto in un database.

<?php

$post = file_get_contents("php://input");
$data = json_decode($post);

echo "Nome : {$data->nome}\nCognome : {$data->cognome}\nEmail : {$data->email}\n";

Conclusioni


Spero che questo esempio di possa essere utile per comprendere il funzionamentoi di Angular, l'esempio è molto basilare ma ti da una visione generale della potenza di questo framework javascript e della sua versatilità. Fammi sapere nei commenti cosa ne pensi.