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:
Javascript
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:
Javascript
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:
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.
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA