FormsModule

En Angular FormsModule es un módulo e que facilita el manejo de formularios y el binding de datos entre el modelo y la vista. Proporciona directivas y servicios esenciales para trabajar con formularios basados en plantillas (template-driven forms).

Formularios basados en plantillas https://youtu.be/0gQ_Q1uGPO0
Trabajar con validaciones de formularios: https://youtu.be/EGGbJaXUvic
Estados de formularios: https://youtu.be/0rBUyHR5rAU
API using HttpClient | Angular 18 - | Angular CRUD https://youtu.be/IXcMAHdJy3o?t=375

Componentes de FormsModule

ngModel: Vincula (Binds) el valor de un control de formulario a una variable. Vincula los controles del formulario a propiedades en el modelo de datos.
ngForm: Realiza un seguimiento (Tracks) del valor y el estado de validez (validity) de un formulario completo. Crea un formulario y rastrea su estado y valores.
ngSubmit: Escucha (Listens) el evento de envío (submit) del formulario. Maneja la acción de envío del formulario.
ngModelGroup: Groups a set of controls together under a single name.
ngControl: Base class for form controls, provides common properties and methods.

HTML

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<input type="text" name="fullName" placeholder="Nombre" ngModel>
<!-- Otros campos aquí -->
<button type="submit">Enviar</button>
</form>

Ejemplo de formulario:

Supongamos que tienes un formulario con campos como “nombre” y “apellido”. Aquí está el código para guardar esos datos en una base de datos local (como localStorage):

TypeScript


// app.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
})
export class AppComponent {
  onSubmit(form: any) {
    // Guardar datos en localStorage
    localStorage.setItem('nombre', form.nombre);
    localStorage.setItem('apellido', form.apellido);
  }
}

HTML


<!-- app.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<input type="text" name="nombre" placeholder="Nombre" ngModel>
<input type="text" name="apellido" placeholder="Apellido" ngModel>
<button type="submit">Guardar</button>
</form>

ngModel:

Interpreta y sincroniza el valor del control de formulario con una propiedad del componente.

<input [(ngModel)]="userName" name="userName">
<input [(ngModel)]="userName" name="userName" required>
<p>Username: {{ userName }}</p>

ngForm:

Representa un formulario y rastrea su estado y validez. <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">


  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input [(ngModel)]="userName" name="userName" required>
  <button type="submit">Submit</button>
  </form>

ngSubmit:

&nbsp Escucha el evento de envío del formulario. <form (ngSubmit)="onSubmit()">

<form (ngSubmit)="onSubmit()">
  <input [(ngModel)]="userName" name="userName" required>
<button type="submit">Submit</button>
</form>

Componentes de FormsModule

ngModelGroup:<

Agrupa un conjunto de controles bajo un solo nombre, útil para agrupar controles relacionados.

<div ngModelGroup="address">

   
 <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
    <div ngModelGroup="address">
    <input [(ngModel)]="address.street" name="street" required>
    <input [(ngModel)]="address.city" name="city" required>
    </div>
    <button type="submit">Submit</button>
 </form>

ngControl:

Clase base para los controles de formulario, no se utiliza directamente en plantillas, pero proporciona propiedades y métodos comunes.


import { FormControl } from '@angular/forms';
let control = new FormControl('initial value');

Ejemplo de formulario: usando JsonPipe, console.log()

Tienes un formulario con campos como “nombre” y “apellido”.

 // Modulos necesarios para la app
  //ejemplo2.component.ts
import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-ejemplo2', standalone: true,
  imports: [ FormsModule, JsonPipe ],
  template:`


<form action=""  #myForm="ngForm" (ngSubmit)="onSubmit(myForm) " >
<input type="text" name="nombre" placeholder="Nombre" ngModel [(ngModel)]="persona.nombre">
<input type="text" name="apellido" placeholder="Apellido" ngModel [(ngModel)]="persona.apellido">
<button type="submit">Guardar</button>
</form>
<p>{{persona | json }}</p>

  `,
  styles:`[]`
})
export class Ejemplo2Component {
  persona = {
    nombre: '',
    apellido: '',
  }  // Probar envio por consola
  procesar() { console.log(this.persona);  }

  onSubmit(form: any) {
       console.log(this.persona);
        // Guardar datos en localStorage
        localStorage.setItem('nombre', form.nombre);
        localStorage.setItem('apellido', form.apellido);
      }
  }

Código de un formulario para guardar datos con Angular v18 y almacenarlos en una base de datos local con JSON Server

Archivo: app.config.ts

// Archivo:  app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
// Importando la clase o modulo
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), provideClientHydration(),
    // Agregando el servicio y funcion HttpClient()
    provideHttpClient() ,
  ]
};

Archivo: // app.component.ts

 // app.component.ts
  import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName: string = '';
  email: string = '';

  constructor(private http: HttpClient) {}

  onSubmit() {
    const formData = {
      userName: this.userName,
      email: this.email
    };
    // Mensaje a mostrar en consola
    console.log('Los datos han sido enviados a db.json');
    // Enviando datos a db.json
    this.http.post('http://localhost:3000/users', formData).subscribe(response => {
        console.log('Data saved successfully', response);
      }, error => {
        console.error('Error saving data', error);
      });
  }
}

Archivo: app.component.html

<!-- app.component.html -->

  <form #MiForm="ngForm" (ngSubmit)="onSubmit()">
    <label for="userName">Username:</label>
    <input type="text" id="userName" [(ngModel)]="userName" name="userName"  required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" [(ngModel)]="email" name="email" required>
    <br>
    <button type="submit" [disabled]="MiForm.form.invalid">Submit</button>
 </form>
 
 <form (ngSubmit)="onSubmit()">

 <label for="userName">Username:</label>

 <input [(ngModel)]="userName" name="userName" required>


 <label for="email">Email:</label>

 <input [(ngModel)]="email" name="email" required>


 <button type="submit">Submit</button>

 </form>

Visto en el navegador:

Configuración del servidor backend con JSON Server:

Este código de Angular junto con el JSON Server permite crear y gestionar un formulario reactivo que guarda los datos en una base de datos local simulada.

API using HttpClient | Angular 18 - | Angular CRUD https://youtu.be/IXcMAHdJy3o?t=375

1- Instala JSON Server:

// bash
npm install -g json-server

// Entrando a la carpeta del proyecto APP
cd practica2

2- Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido:

//Creando el archivo: db.json y agreando el contenido
{ "users": [] }

3- Inicia JSON Server:

// bash
json-server --watch db.json --port 3000


C:\ANGULAR-v18\Cmder_Consola\practica2 (master)
 json-server --watch db.json --port 3000

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

4. Agregar al archivo app.config.ts el servicio provideHttpClient y funcion provideHttpClient()

 // Archivo:  app.config.ts
// Importando la clase o modulo
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    // Agregando el servicio y funcion HttpClient()
    provideHttpClient() ,
  ]
};

5. Archivo template:

// formulario3.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-formulario3',
  standalone: true,
  imports: [FormsModule],
  template:`
 <form #MiForm="ngForm" (ngSubmit)="onSubmit()">
    <label for="userName">Username:</label>
    <input type="text" id="userName" [(ngModel)]="userName" name="userName"  required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" [(ngModel)]="email" name="email" required>
    <br>
    <button type="submit" [disabled]="MiForm.form.invalid">Submit</button>
 </form>
  `,
  styles: `[]`,
})
export class Formulario3Component {
 userName: string = '';
 email: string = '';
  constructor(private http: HttpClient) {}

  onSubmit() {
    const formData = {
      userName: this.userName,
      email: this.email
    };
    // Mensaje a mostrar en consola
    console.log('Los datos han sido enviados a db.json');
    // Enviando datos a db.json
    this.http.post('http://localhost:3000/users', formData).subscribe(response => {
        console.log('Data saved successfully', response);
      }, error => {
        console.error('Error saving data', error);
      });
  }
}

...

Angular: Formularios -- FormsModule