cambios en el aspecto. Validators en el formulario de evento.

src/app/prompt-evento/prompt-evento.page.html

@@ -10,8 +10,12 @@
   <ion-item>
   <label>
     Nombre del evento: 
-    <input type="text" formControlName = "nombre">
+    <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>
@@ -19,6 +23,10 @@
       Fecha:
       <ion-datetime displayFormat="DD/MM, HH:mm"placeholder="Elegir Fecha" formControlName="fecha"></ion-datetime>
     </label>
+    <span
+      *ngIf="fecha.errors.required && submitted">
+      Tu evento necesita una fecha
+    </span>
   </ion-item>
 
 
@@ -27,6 +35,10 @@
       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>
@@ -34,6 +46,10 @@
       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>

src/app/prompt-evento/prompt-evento.page.scss

@@ -22,3 +22,12 @@ label{
     color: wheat,
 }
 
+textarea{
+    color: black;
+}
+
+span{
+    color: red;
+    font-style: italic;
+}
+

src/app/prompt-evento/prompt-evento.page.ts

@@ -10,10 +10,11 @@ import { Router } from '@angular/router';
   styleUrls: ['./prompt-evento.page.scss'],
 })
 export class PromptEventoPage implements OnInit{
+
+  submitted = false;
   eventoForm = new FormGroup({
       nombre: new FormControl('', Validators.required),
       fecha: new FormControl('', Validators.required),
-      hora: new FormControl('', Validators.required),
       precio1: new FormControl('', Validators.required),
       precio2: new FormControl('', Validators.required),
       descripcion: new FormControl('', Validators.required),
@@ -31,9 +32,12 @@ export class PromptEventoPage implements OnInit{
     }
   }
   onSubmit(){
-    let evento = new Evento();
-    this.asignarEvento(evento);
-    this.router.navigate(['/tabs']);
+    this.submitted = true;
+    if (this.eventoForm.valid){
+      let evento = new Evento();
+      this.asignarEvento(evento);
+      this.router.navigate(['/tabs']);
+    }
   }
   asignarEvento(evento: Evento){
     evento.setNombre(this.eventoForm.get('nombre').value);
@@ -56,6 +60,30 @@ export class PromptEventoPage implements OnInit{
       this.tab1Service.eventoForms.push(this.eventoForm);}
     
   }
+
+  get nombre(){
+    return this.eventoForm.get('nombre');
+  }
+
+  get fecha(){
+    return this.eventoForm.get('fecha');
+  }
+
+  get hora(){
+    return this.eventoForm.get('hora');
+  }
+
+  get precio1() {
+    return this.eventoForm.get('precio1');
+  }
+
+  get precio2() {
+    return this.eventoForm.get('precio2');
+  }
+
+  get descripcion(){
+    return this.eventoForm.get('descripcion');
+  }
   
 
 }