Angular cuenta con 2 maneras de trabajar formularios, la primera son los formularios basados en plantilla, y la segunda son los formularios reactivos, en esta ocasión veremos un ejemplo de un formulario basado en plantilla.
app.module.ts
Para esto necesitamos importar el módulo FormsModule, en el archivo app.module.ts
import { NgModule } from '@angular/core';;
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
Formulario2Component
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
component.ts
En el component.ts agregamos una propiedad llamada persona con nombre y apellido
import { Component } from '@angular/core';
@Component({
selector: 'app-formulario2',
templateUrl: './formulario2.component.html',
styleUrls: ['./formulario2.component.css']
})
export class Formulario2Component {
persona =
{
nombre: '',
apellido: ''
}
procesar()
{
console.log(this.persona);
}
}
component.html
en el component.html la primera parte del es un div el cual usamos para mostrar la alerta al usuario y se usa la propiedad [hidden] para validar cuando se debe mostrar.
la propiedad valid regresa true cuando las validaciones del control se cumplen.
la propiedad pristine regresa true cuando aún no se ha modificado el control.
Después pondremos los campos nombre y apellido, ambos con atributos required. La directiva [(ngModel)]=»persona.nombre» hace referencia a la propiedad que definimos en el archivo component.ts
Con el simbolo «#» se crea una variable que enlazará nuestro campo y la propiedad definida en component.ts y se asigna a ngModel, quedando de la siguiente manera: #nombre=»ngModel»
<div class="card">
<div class="card-body">
<form (ngSubmit)="procesar()">
<div class="alert alert-danger" [hidden]="(name.valid || apellido.pristine ) && (apellido.valid || apellido.pristine)">
<ul>
<li [hidden]="name.valid || name.pristine">
*El nombre es obligatorio
</li>
<li [hidden]="apellido.valid || apellido.pristine">
*El apellido es obligatorio
</li>
</ul>
</div>
<label class="form-label">
Nombre:
</label>
<input type="text" name="nombre" class="form-control" placeholder="ingrese un nombre" [(ngModel)]="persona.nombre" required #name="ngModel">
<div>
<label class="form-label">
Apellido:
</label>
<input type="text" name="apellido" class="form-control" placeholder="ingrese el apellido" [(ngModel)]="persona.apellido" required #apellido="ngModel">
</div>
<button class="btn btn-primary">
Enviar
</button>
</form>
</div>
</div>
dándonos como resultado mostrando una notificación cuando las validaciones no se cumplen como se ve en la siguiente imagen
así logramos una validación sencilla de 2 campos required, espero que este ejemplo te sea de utilidad déjame tus comentarios o preguntas
Saludos!
codeando en el tzopantli 