Actividad entregable

En Angular existen dos tipos de formularios: los template-driven y los reactive forms.

En este proyecto usamos formularios reactivos porque son más potentes, más organizados y son el estándar profesional.

Además, para esta actividad necesitamos enviar datos al padre, validar, generar un producto nuevo y resetear el formulario.

Eso se hace mucho mejor con Reactive Forms.

Abrimos product-form.component.ts y añadimos:

import { Component, EventEmitter, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

En el decorador:

imports: [CommonModule, ReactiveFormsModule],

Reactive Forms viene del módulo ReactiveFormsModule, que debemos importar directamente en el componente porque es standalone

Creamos un FormGroup con los campos necesarios para un producto.

Usamos un @Output() llamado productoCreado para enviar los datos al componente padre. 

El método enviar() simplemente emite los datos del formulario y luego lo resetea.

Todavía no creamos el producto en el servicio porque eso lo veremos mas adelante junto con el UUID.

export class ProductFormComponent {

  @Output() productoCreado = new EventEmitter<any>();

  formulario = new FormGroup({
    name: new FormControl(''),
    description: new FormControl(''),
    price: new FormControl(0),
    category: new FormControl(''),
    image: new FormControl(''),
    active: new FormControl(true)
  });

  enviar() {
    this.productoCreado.emit(this.formulario.value);
    this.formulario.reset({
      name: '',
      description: '',
      price: 0,
      category: '',
      image: '',
      active: true
    });
  }
}

export class ProductFormComponent {

  @Output() productoCreado = new EventEmitter();

  formulario = new FormGroup({
    name: new FormControl(''),
    description: new FormControl(''),
    price: new FormControl(class="tokts-number">0),
    category: new FormControl(''),
    image: new FormControl(''),
    active: new FormControl(true)
  });

  enviar() {
    this.productoCreado.emit(this.formulario.value);
    this.formulario.reset({
      name: '',
      description: '',
      price: class="tokts-number">0,
      category: '',
      image: '',
      active: true
    });
  }
}