Visualizzare gli errori di validazione nella pagina nei Reactive forms in Angular

In questo vediamo come visualizzare gli errori di validazione dei Reactive forms in Angular direttamente nella pagina.

Inoltre mostreremo il bottone solo nel caso in cui il form sia valido.

Per prima cosa dovete fare una modifica al tsconfig.json mettendo due parametri a false (sono indicati):

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false, // FALSE
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": false, // FALSE
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Poi accertatevi di aver incluso il modulo nell'app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

A questo punto vediamo il componente:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'Test Angular';

  frm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.creaForm();
  }

  creaForm(): void {
    this.frm = this.fb.group({
      email: ['', [Validators.email, Validators.required]]
    });
  }
}

Ho messo un solo campo, e due validazioni.

Nella parte HTML:

<form [formGroup]="frm" novalidate>

  <div>
    <label class="center-block">Email *</label>:
    <input formControlName="email">
  </div>

  <div *ngIf="frm.controls['email'].invalid && (frm.controls['email'].dirty || frm.controls['email'].touched)"
       style="border: 1px solid red;">
    <div *ngIf="frm.controls['email'].errors.required">
      Email obbligatoria
    </div>

    <div *ngIf="frm.controls['email'].errors.email">
      Email non corretta
    </div>
  </div>

  <button type="button" *ngIf="frm.valid">Invia</button>

</form>

<hr>

<p>FORM VALUE: {{ frm.value | json }}</p>
<p>FORM SATUS: {{ frm.status | json }}</p>

Le due ultime due righe sono solo per debug.

Come vedete il riquadro rosso viene mostrato solo quando scrivete, e il bottone non è visibile.

Ovviamente potete un pò giocare con questi comportamenti a seconda di come preferite.

Enjoy!