Angular: Formularios basados en plantilla

Formularios basados en plantilla

Los formularios basados en plantillas son una alternativa a los formularios reactivos en Angular. En lugar de trabajar con flujos observables y modelos explícitos, utilizan directivas en la plantilla HTML para vincular los campos del formulario con propiedades en el componente. 

Componentes clave de los Formularios basados en plantillas:

ngModel: Esta directiva se utiliza para vincular un campo de entrada (como un input) a una propiedad en el componente. Por ejemplo: <input [(ngModel)]="nombre" name="nombre">

ngForm: Esta directiva agrupa los campos de entrada en un formulario. Puedes acceder a su estado y validación. Por ejemplo:  <form #miFormulario="ngForm">   <!-- Campos de entrada aquí --> </form>

1. Angular (v18)  Formularios basados en plantilla: https://youtu.be/SS77aRHfzYU
2. Angular (v18)  Formularios basados en plantilla (parte2): https://youtu.be/ig2NUZDj4hk

En resumen:

• Usamos ngForm para agrupar los campos.
• Vinculamos los campos de entrada con ngModel.
• El método onSubmit() se ejecuta al enviar el formulario.

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

@Component({
  selector: 'app-formulario1',
   standalone: true,
   imports: [ FormsModule, ],
  template:` 
  <h3> Formulario de perfil </h3>
  <form #profileForm="ngForm" (ngSubmit)="onSubmit()">
    <label for="firstName">Nombre:</label>
    <input type="text" id="firstName" name="firstName" [(ngModel)]="BDatos.nombre" required>
    <label for="lastName">Apellido:</label>
    <input type="text" id="lastName" name="lastName" [(ngModel)]="BDatos.apellido" required>
    <!-- Enviar la información: formulario de perfil -->
    <button type="submit" [disabled]="profileForm.form.invalid"> Guardar </button>
  </form> <br>
<!-- Información a mostrar despues de enviar la información -->
<h4 style="color:green;"><b>{{mensajeEnviado}}</b></h4>
  `,
  styles: `[]`
})
export class Formulario1Component {
  // Creando el objeto persona = BDatos
  BDatos = { nombre:'', apellido:'',  }

  // Declarando e iniciaizando variables
  mensajeEnviado='';

  // Funcion de enviar los datos
  onSubmit(){ // AcciONES a ejecutarse, cuando se envian los datos
    // Para visualizar en consola, si los datos se han enviado
    console.log(this.BDatos);
    // Para mostrar en pantalla
    this.mensajeEnviado = 'Los datos del formulario de perfil, se enviaron correctamente';
  }
}

Practica: APP de formulario basado en plantillas

 // creamos el proyecto
ng new practica2

// creamos el archivo de componentes: html, css, ts
ng g c formulario/plantilla

// Entramos al proyecto: practica
cd practica2

// Abrimos el proyecto en el editor de texto: Visual Studio Code desde la consola
 code .
 
// creamos el archivo: class Programador
programador.component.ts

// Abrimos el servidor
ng serve --open

Archivo: plantilla.component.ts

// plantilla.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
// Agregando la clase programador creado como componente externo
import {Programador} from './programador'

@Component({
  selector: 'app-plantilla',
  standalone: true,
  // Declarando modulos importados
  imports: [FormsModule, CommonModule],
  templateUrl: './plantilla.component.html',
  styleUrl: './plantilla.component.css'
})
export class PlantillaComponent {
  // Datos del programador = archivo externo publico
  programador = new Programador();
  especialidades = ['front-end', 'back-end', 'ambos'];

  // Funcion de enviar los datos
  enviado=false;
  enviar(){
    this.enviado= true;
  }
}

Archivo: programador.component.ts

// programador.component.ts    ===> componente externo
export class Programador {
      // el signo de interrogración establece que los parametros seran opcionales
    constructor(
      // definiendo variables y su valor
      public nombre?:string,
      public especialidad?:string,
    ){ }
}

Archivo: plantilla.component.html

<!-- plantilla.component.html -->
<h2>Datos del programador</h2>
<div [hidden]="enviado"> <!-- Contenedor del formulario -->
  <form (ngSubmit)="enviar()" #programadoForm="ngForm">
    <div> 
      <label for="nombre"> Nombre </label>
      <input type="text" [(ngModel)]="programador.nombre" name="nombre" id="nombre" required #nombre="ngModel">
      <div [hidden]="nombre.valid" class="alert">
        El nombre es requerido
      </div>
    </div>
    <br>
    <div>
      <label for="especialidad">Especialidad</label>
      <select [(ngModel)]="programador.especialidad" name="especialidad" id="especialidad" required #especialidad="ngModel">
        <option *ngFor="let especialidad of especialidades" [value]="especialidad">{{especialidad}}</option>
      </select>
      <div [hidden]="especialidad.valid" class="alert">
        La especialidad es requerida
      </div>
    </div>
    <!-- Enviar la información -->
    <button type="submit" [disabled]="programadoForm.form.invalid"> Enviar </button>
  </form>
</div>
<!-- Información a mostrar despues de enviar la información -->
<div [hidden]="!enviado">
  Los datos de enviaron correctamente
</div>
<br>
<p>{{programador.nombre}}</p>
<p>{{programador.especialidad}}</p>

mmmmm

...