Convalidare un modulo web in un'applicazione Angular

In Angular è possibile convalidare un modulo web utilizzando la direttiva ngForm, in questo articolo vedremo come esempio la convalida di un modulo web per la registrazione degli utenti, composto da tre campi username, email e password.

Se abbiamo un'applicazione Angular già esistente allora la prima cosa da fare è importare FormsModule in app.module.ts, assicuriamoci di aver importato anche BrowserModule

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

in particolare l'applicazione Angular di esempio è così composta

applicazione angular default

Come detto in precedenza il modulo web è composto da tre campi username, email e password, settiamo i valori di default di questi campi a null in app.component.ts

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  email_value = null;
  password_value = null;
  username_value = null;

  signUp(form: { form: { value: any; controls: any } }) {
    Object.keys(form.form.value).forEach(function (key) {
      console.log(key, form.form.value[key]);
    });
  }
}

email_value, password_value e username_value sono i valori di default dei campi, signUp è la funzione mediante la quale recupereremo i dati del modulo web, in questo esempio li visualizzeremo nella console del browser.

I dati del modulo web dovranno essere del seguente formato:

username: alfanumerico, inizia con una lettera e non contiene caratteri speciali diversi dal trattino basso o dal trattino
email: in formato email valido
password: deve avere una lunghezza compresa tra 4 e 8 cifre e includere almeno una cifra numerica

ecco il modulo web di esempio

app.component.html

<form #f="ngForm" (ngSubmit)="signUp(f)">
  <div class="mb-3">
    <label class="form-label">Username</label>
    <input
      #username="ngModel"
      pattern="^([a-zA-Z])[a-zA-Z_-]*[\w_-]*[\S]$|^([a-zA-Z])[0-9_-]*[\S]$|^[a-zA-Z]*[\S]$"
      type="text"
      class="form-control"
      [(ngModel)]="username_value"
      name="username"
      required
    />
    <div class="text-danger" *ngIf="username.errors?.required">
      Required Field!
    </div>
    <div class="text-danger" *ngIf="username.errors?.pattern">
      Username not valid!
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input
      #email="ngModel"
      pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$"
      type="email"
      class="form-control"
      [(ngModel)]="email_value"
      name="email"
      required
    />
    <div class="text-danger" *ngIf="email.errors?.required">
      Required Field!
    </div>
    <div class="text-danger" *ngIf="email.errors?.pattern">
      Email not valid!
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label">Password</label>
    <input
      #password="ngModel"
      pattern="^(?=.*\d).{4,8}$"
      type="password"
      class="form-control"
      [(ngModel)]="password_value"
      name="password"
      required
    />
    <div class="text-danger" *ngIf="password.errors?.required">
      Required Field!
    </div>
    <div class="text-danger" *ngIf="password.errors?.pattern">
      Password not valid!
    </div>
  </div>
  <button [disabled]="f.invalid" type="submit" class="btn btn-primary">
    Submit
  </button>
</form>

per tutti e tre i campi è stato usato un attributo pattern con un'espressione regolare, in modo che il campo rispetti il formato richiesto, ad ogni campo è stato assegnato il valore di default null tramite la direttiva ngModel e una template variable (variabile di template) con valore ngModel

..............
..............
    <input
      #username="ngModel"
      pattern="^([a-zA-Z])[a-zA-Z_-]*[\w_-]*[\S]$|^([a-zA-Z])[0-9_-]*[\S]$|^[a-zA-Z]*[\S]$"
      ..............
      ..............
      [(ngModel)]="username_value"
      ..............
      ..............
    />
..............
..............
<input
      #email="ngModel"
      pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$"
      ..............
      ..............
      [(ngModel)]="email_value"
      ..............
      ..............
    />
..............
..............
<input
      #password="ngModel"
      pattern="^(?=.*\d).{4,8}$"
      ..............
      ..............
      [(ngModel)]="password_value"
      ..............
      ..............
    />

inoltre tramite la direttiva ngIf comparirà la scritta "Required Field!" ad indicare che è un campo richiesto oppure che non è valido

..............
..............
<div class="text-danger" *ngIf="username.errors?.required">
    Required Field!
</div>
<div class="text-danger" *ngIf="username.errors?.pattern">
    Username not valid!
</div>
..............
..............
<div class="text-danger" *ngIf="email.errors?.required">
    Required Field!
</div>
<div class="text-danger" *ngIf="email.errors?.pattern">
    Email not valid!
</div>
..............
..............
<div class="text-danger" *ngIf="password.errors?.required">
    Required Field!
</div>
<div class="text-danger" *ngIf="password.errors?.pattern">
    Password not valid!
</div>

il bottone per l'invio del modulo è disabilitato finchè i campi non sono validi, quindi non sarà possibile inviare i dati del modulo finchè essi non saranno validi, ciò è possibile settando la direttiva disabled uguale a f.invalid

<button [disabled]="f.invalid" type="submit" class="btn btn-primary">
    Submit
</button>

dove f è la template variable assegnata al form ed è uguale a ngForm, la direttiva ngSubmit chiama la funzione signUp che abbiamo definito prima in app.component.ts alla quale passiamo come parametro la template variable f

<form #f="ngForm" (ngSubmit)="signUp(f)">
..............
..............

Code on Stackblitz