Explicación de Inyección de dependencias, formularios y validaciones

4.1. Crear el componente de formulario template

Creamos el compoenente

ng generate component componentes/form-template --standalone --skip-tests

Y retocamos src/app/componentes/form-template/form-template.component.ts

import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';

@Component({
  selector: 'app-form-template',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h2>Formulario Template-driven</h2>

    <form #personaForm="ngForm" (ngSubmit)="onSubmit(personaForm)">
      <div>
        <label>Nombre</label>
        <input
          type="text"
          name="nombre"
          ngModel
          required
        >
        @if (personaForm.submitted && personaForm.controls['nombre']?.invalid) {
          <small style="color:red">El nombre es obligatorio</small>
        }
      </div>

      <div>
        <label>Email</label>
        <input
          type="email"
          name="email"
          ngModel
        >
      </div>

      <button type="submit">Enviar</button>
    </form>

    <h3>Datos del formulario</h3>
    <pre>{{ personaForm.value | json }}</pre>
  `
})
export class FormTemplateComponent {

  onSubmit(form: NgForm) {
    console.log('Template form enviado:', form.value);
  }
}