¿Cómo activar validadores de formularios en Angular2?

En Angular 2, la mejor manera de lidiar con formularios complejos es mediante el uso de formularios reactivos. A continuación, explicaremos cómo activar validadores de formulario para la página de inicio de sesión.

En los formularios reactivos, usamos FormControl y al usar esto, obtenemos acceso a los subcampos del formulario y sus propiedades. Algunas de sus propiedades son sucias, tocadas, intactas, prístinas, válidas, errores, etc. Usando estas propiedades, podemos activar validaciones de acuerdo con el requisito.

• Sucio: esta propiedad se activa si el usuario cambia el valor del subcampo del valor predeterminado.
• Tocado: si el usuario visita el subcampo, el valor de la propiedad tocada se establece en «verdadero».
• Sin tocar: si el usuario no visita el subcampo, el valor de la propiedad sin tocar se establece en «verdadero». Es completamente opuesto a la propiedad tocada.
• Prístino: si el usuario visita el subcampo y no realiza ningún cambio en su valor, se establece en «verdadero».
• Válido: si el formulario cumple con todas las validaciones del formulario, será «verdadero».
• Errores: Angular en el lado del cliente genera una lista de errores que contienen todos los errores incorporados como requerido, maxLength, patrón, minLength, etc.

Usando las propiedades discutidas anteriormente, podemos activar las validaciones de formulario con mensajes personalizados. Usando el FormControl de cada subcampo y verificando sus propiedades como tocado, sucio, etc., podemos validar el formulario según la necesidad.

Acercarse:

• Primero, agregue todos los controles de formulario en el archivo component.ts de acuerdo con el archivo .html.
• Luego agregue validaciones en el archivo component.ts para los subcampos requeridos, Ejemplo: Requerido, Longitud máxima, Patrón, etc. 
• Asegúrese de haber importado todo desde Validators desde ‘angular@/forms’
• Luego agregue mensajes de validación en el archivo .html que se muestra en el siguiente código.
• Además, importe todas las dependencias de ‘angular@/material’ en el archivo del módulo.

Para mejores animaciones y estilo, angular proporciona material angular que tiene abundante información sobre el estilo. Usando material angular, se aplica estilo al formulario. Por lo tanto, estamos usando etiquetas como <mat-form-field>, <mat-error>, <mat-label> y matInput.

Podemos importar desde material angular después de instalarlo usando npm. El comando para importarlo se menciona a continuación:

ng add @angular/material

Implementación de código: a continuación se muestra la implementación del enfoque anterior.

aplicación.módulo.ts:

import { BrowserModule } from 
        '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from 
        '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } 
        from '@angular/forms';
import { MatInputModule } from 
        '@angular/material/input';
import { MatDialogModule } from 
        '@angular/material/dialog';
import { MatFormFieldModule } from 
        '@angular/material/form-field';
import { MatIconModule } from 
        '@angular/material/icon';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        MatIconModule,
        MatDialogModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

aplicación.componente.ts:

import { Component, OnInit } 
        from '@angular/core';
  
// Imports
import { FormGroup, FormControl, 
    Validators } from '@angular/forms';
  
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
    profile = new FormGroup(
        {
            // Setting Validation Controls
            email: new FormControl('', 
                [Validators.required, 
                Validators.minLength(8),
                Validators.pattern(
/^\w+@[a-z0-9A-Z_]+?\.[a-zA-Z]{2, 5}$/)]),
                password: new FormControl('', 
                [Validators.required, 
                Validators.minLength(8),
                Validators.pattern(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8, }$/)])
        }
    );
}

 aplicación.componente.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 
              col-md-6 col-lg-12">
  
      <h4>Login to start</h4>
  
      <form [formGroup]="profile">
  
        <mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input type="email" matInput 
            placeholder="Enter Email" 
            formControlName="email">
  
          <mat-error *ngIf=
"profile.controls['email'].errors?.pattern && profile.controls['email'].touched">
            Enter a valid email with 
            requested pattern
          </mat-error>
  
          <mat-error *ngIf=
"profile.controls['email'].errors?.minLength && profile.controls['email'].touched">
            Email should have minimum 
            8 characters
          </mat-error>
  
          <mat-error *ngIf=
"profile.controls['email'].errors?.required && profile.controls['email'].touched">
            Email is required
          </mat-error>
        </mat-form-field>
  
        <mat appearance="outline">
          <mat-label>Password</mat-label>
          <input matInput type="password" 
            placeholder="Enter password" 
            formControlName="password">
  
          <mat-error *ngIf=
"profile.controls['password'].errors?.required && profile.controls['password'].touched">
            Password is required
          </mat-error>
  
          <mat-error *ngIf=
"profile.controls['password'].errors?.minLength && profile.controls['password'].touched">
            Enter a password with 
            more than 8 letters
          </mat-error>
  
          <mat-error *ngIf=
"profile.controls['password'].errors?.pattern && profile.controls['password'].touched">
            Enter a password with 
            valid pattern
          </mat-error>
        </mat - form - field>
  
        <button class="btn btn-primary" 
          [disabled]="!profile.valid"> 
          Submit
        </button>
      </form>
    </div>
  </div>
</div>

Salida: por lo tanto, hemos activado con éxito las validaciones de formularios.