<ion-header>
  <ion-toolbar>
    <ion-title>Nuevo Evento</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="eventoForm" (ngSubmit)="onSubmit()">

  <ion-item>
  <label>
    Nombre del evento: 
    <input type="text" id="nombre" formControlName = "nombre">
  </label>
  <span
    *ngIf="nombre.errors.required && (nombre.touched||submitted)">
    Tu evento necesita un nombre
  </span>
  </ion-item>

  <ion-item>
    <label>
      Fecha:
      <ion-datetime displayFormat="YYYY/DD/MM"placeholder="Elegir Fecha" formControlName="fecha"></ion-datetime>
    </label>
    <span
      *ngIf="fecha.errors.required && submitted">
      Tu evento necesita una fecha
    </span>
  </ion-item>

  <ion-item>
    <label>
      Hora
      <ion-datetime displayFormat="HH:MM"placeholder="Elegir Hora" formControlName="hora"></ion-datetime>
    </label>
    <span
      *ngIf="hora.errors.required && submitted">
      Tu evento necesita una hora
    </span>
  </ion-item>


  <ion-item>
    <label>
      Precio:
      <input type="number" formControlName = "precio1"><label>, </label><input type="number" formControlName = "precio2">
    </label>
    <span
    *ngIf="precio1.errors.required && (precio1.touched||submitted)">
    Tu evento necesita un precio (puede ser 0)
  </span>
  </ion-item>

  <ion-item>
    <label>
      Descripción: 
      <textarea formControlName = "descripcion" rows="10"></textarea>
    </label>
    <span
    *ngIf="descripcion.errors.required && (descripcion.touched||submitted)">
    ¡Dale una descripción a tu evento!
  </span>
  </ion-item>

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



  
</ion-content>