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

src/app/login.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/login.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor() { }
+}

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -7,11 +7,7 @@
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title class="titulo" size="large">Mi Perfil</ion-title>
-    </ion-toolbar>
-  </ion-header>
+
 
   
     <div class='fotoPerfil'>

src/app/perfil-discoteca/perfil-discoteca.page.scss

@@ -7,13 +7,11 @@
     
     *{
       padding: 5px;
+      display: block;
+      margin: auto;
     }
-    .titulo{
-      font: "arial";
     
-    }
     .fotoPerfil{
-        display: block;
         text-align: end;
         max-width: 800px;
         max-height: auto;
@@ -34,9 +32,9 @@
     
     .datosDisplay{
     
-        float: left;
-        position: relative;
-        margin: auto;
+      float: left;
+      position: relative;
+      margin: auto;
         
     }
     
@@ -76,5 +74,5 @@
     }
     
     ion-slides {
-      height: 100%;
+      height: 200px;
     }

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');
+  }
   
 
 }