Los formularios reactivos son la alternativa en angular a los formularios basados en plantillas, estos tienen como característica simplificar las validaciones y el control de los elementos del formulario, para el ejemplo utilizaré el formulario de 2 campos del con post de formularios basados en plantilla.
Importar FormBuilder, FormControl y Validators
import { FormControl, FormBuilder, Validators } from '@angular/forms';
El formulario formUser definiendo los campos name y email agregando los validadores y que integra cada campo que en este caso los que ocuparé son required y email.
export class FormularioReactivoComponent {
constructor(private fb: FormBuilder)
{
}
formUser = this.fb.group({
'name': ['',Validators.required],
'email': ['', [Validators.required, Validators.email]]
});
}
En seguida agregar métodos getters para regresar el valor de cada campo, el archivo component.ts queda de la siguiente manera:
import { Component } from '@angular/core';
import { FormControl, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-formulario-reactivo',
templateUrl: './formulario-reactivo.component.html',
styleUrls: ['./formulario-reactivo.component.css']
})
export class FormularioReactivoComponent {
constructor(private fb: FormBuilder)
{
}
formUser = this.fb.group({
'name': ['',Validators.required],
'email': ['', [Validators.required, Validators.email]]
});
get name()
{
return this.formUser.get('name') as FormControl;
}
get email()
{
return this.formUser.get('email') as FormControl;
}
}
En el HTML se agrega un formulario haciendo referencia al formGroup llamado formUser
<div class="card">
<div class="card-body">
<form [formGroup]="formUser">
</form>
</div>
</div>
Se define el campo name ,que incluye una alerta que se mostrará cuando lo escrito en el campo no pase las validaciones o aún no se haya modificado.
<div class="mb-2">
<label for="form-label">
Nombre
</label>
<input type="text"formControlName="name" class="form-control" placeholder="Ingrese su nombre">
<div class="alert alert-danger" [hidden]="name.valid || name.pristine">
El nombre es obligatorio
</div>
</div>
De igual manera se agrega el campo email con una alerta que se mostrará cuando lo escrito en el campo no pase las validaciones o aún no se haya modificado, pero como en este caso hay 2 validaciones (required y email), el mensaje al usuario se divide en 2 span validando con un *ngif, sin olvidar el botón Enviar para el submit del formulario que se deshabilitará cuando algún campo de formUser no sea válido.
El formulario completo queda de la siguiente manera:
<div class="card">
<div class="card-body">
<form [formGroup]="formUser" (ngSubmit)="procesar()">
<div class="mb-2">
<label for="form-label">
Nombre
</label>
<input type="text"formControlName="name" class="form-control" placeholder="Ingrese su nombre">
<div class="alert alert-danger" [hidden]="name.valid || name.pristine">
El nombre es obligatorio
</div>
</div>
<div class="mb-2">
<label for="form-label">
Email
</label>
<input type="email" formControlName="email" class="form-control" placeholder="ingrese el nombre">
<input type="email" formControlName="email" class="form-control" placeholder="Ingrese su email">
<div class="alert alert-danger" [hidden]="email.valid || email.pristine">
<span *ngIf="email?.errors?.['required']">El email es obligatorio</span>
<span *ngIf="email?.errors?.['email']">El email debe ser valido</span>
</div>
</div>
<button class="btn btn-primary" [disabled]="formUser.invalid">Enviar</button>
</form>
</div>
</div>
La salida se verá así:
Gracias por leer este tutorial, nos leemos en la siguiente entrada.
codeando en el tzopantli 