7.Formularios

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.