Objetivo
Aprender a crear y manejar formularios en Angular.
Configurar Formularios Reactivos
Abre src/app/app.module.ts
y asegura que el módulo ReactiveFormsModule
esté importado:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports.[
// otros imports...
ReactiveFormsModule
]
})
Crear un Formulario Reactivo
Abre src/app/my-component/my-component.component.ts
y agrega la lógica para el formulario:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector.'app-my-component',
templateUrl.'./my-component.component.html',
styleUrls.['./my-component.component.css']
})
export class MyComponent {
myForm.FormGroup;
constructor(private fb.FormBuilder) {
this.myForm = this.fb.group({
name.['', Validators.required],
email.['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.myForm.valid) {
console.log('Formulario Enviado', this.myForm.value);
} else {
console.log('Formulario Inválido');
}
}
}
Editar la Plantilla del Formulario
Abre src/app/my-component/my-component.component.html
y agrega el formulario:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">Nombre:</label>
<input id="name" formControlName="name">
<div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
Nombre es requerido.
</div>
<label for="email">Email:</label>
<input id="email" formControlName="email">
<div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
Proporcione un email válido.
</div>
<button type="submit">Enviar</button>
</form>
Conceptos Básicos
Los formularios en Angular pueden ser manejados de manera reactiva utilizando ReactiveFormsModule
. Los formularios reactivos proporcionan una manera más estructurada y escalable de manejar formularios en aplicaciones Angular.
Ejercicio
Crea y maneja un formulario reactivo en tu proyecto Angular. Verifica que los datos del formulario se validen correctamente y se manejen al enviar.