added validations in form

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -1,4 +1,8 @@
 <div class="text-center mt-3">
+    <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
+        Field technology is requiered. Enter this field for clock out.
+    </div>
+
     <div class="card">
         <div class="card-header">
             <div class="row">
@@ -12,7 +16,8 @@
         </div>
 
         <div class="card-body">
-            <p class="card-title text-left"><strong>Dario</strong> clocked out at <strong>hh:mm:ss</strong></p>
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>Dario</strong> clocked <strong class="text-success">in</strong> at <strong>hh:mm:ss</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>Dario</strong> clocked <strong class="text-danger">out</strong> at <strong>hh:mm:ss</strong></p>
             <h6 class="text-left"><strong>Totals</strong></h6>
             <hr>
             <div class="row">
@@ -68,7 +73,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <div class="form-group row">
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
-                        <input type="text" class="form-control">
+                        <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
                     </div>
                 </div>
             </form>
@@ -82,7 +87,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     </div>
                     <div class="col text-right">
                         <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
-                        <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockIn()">Clock Out</button>
+                        <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
                     </div>
                 </div>
             </div>

src/app/components/options-sidebar/time-clock/time-clock.component.ts

@@ -8,14 +8,34 @@ import { Component, OnInit } from '@angular/core';
 export class TimeClockComponent {
 
   isClockIn: boolean;
+  isEnterTechnology: boolean;
+  showAlertEnterTecnology: boolean;
 
   constructor() {
     this.isClockIn = true;
+    this.isEnterTechnology = false;
    }
 
    employeClockIn(): boolean {
      this.isClockIn = !this.isClockIn;
-     console.log('valor es' + this.isClockIn);
      return this.isClockIn;
    }
+
+   employeClockOut() {
+     if ( this.isEnterTechnology === false ) {
+       this.isClockIn = false;
+       this.showAlertEnterTecnology = true;
+     } else {
+       this.isClockIn = true;
+       this.showAlertEnterTecnology = false;
+     }
+   }
+
+   enterTechnology(data: string) {
+     if ( data.length > 0 ) {
+      this.isEnterTechnology = true;
+     } else {
+       this.isEnterTechnology = false;
+     }
+   }
 }