Improve validation

src/app/shared/agenda/edit-event/edit-event.page.html

@@ -13,15 +13,27 @@
 
 <ion-content>
   <div class="main-content">
-    <div class="ion-item-container">
+    
+    <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
       <ion-input  placeholder="Assunto*" [(ngModel)]="postEvent.Subject"></ion-input>
     </div>
+    <div *ngIf="Form && validateFrom" >
+      <div *ngIf="Form.get('Subject').invalid " class="input-errror-message">
+        <div *ngIf="Form.get('Subject').errors?.required">
+          Campo obrigatório.
+        </div>
+        <div *ngIf="Form.get('Subject').errors?.minlength">
+          O campo deve ter pelo menos 4 caracteres.
+        </div>
+      </div>
+    </div>
+    
     <div class="container-div">
       <div class="ion-item-class-2 width-100 d-flex">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
+        <div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Location')?.invalid  && validateFrom ">
           <ion-input placeholder="Localização*" [(ngModel)]="postEvent.Location"></ion-input>
         </div>
       </div>
@@ -30,8 +42,19 @@
         Campo obrigatório
       </span> -->
   
-      
     </div>
+
+    <div *ngIf="Form && validateFrom" >
+      <div *ngIf="Form.get('Location').invalid " class="input-errror-message">
+        <div *ngIf="Form.get('Location').errors?.required">
+          Campo obrigatório.
+        </div>
+        <div *ngIf="Form.get('Location').errors?.minlength">
+          O campo deve ter pelo menos 4 caracteres.
+        </div>
+      </div>
+    </div>
+  
   
     <div class="container-div">
       <div class="ion-item-class-2 width-100 d-flex">
@@ -161,13 +184,21 @@
         </div>
       </div>
     </div>
+
+    <div *ngIf="Form && validateFrom" >
+      <div *ngIf="Form.get('participantes').invalid " class="input-errror-message">
+        <div *ngIf="Form.get('participantes').errors?.required">
+          Adicionar participant.
+        </div>
+      </div>
+    </div>
     
     <div class=" d-flex width-100">
       <div class="ion-item-class-2 width-100">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
         </div>
-        <div class="ion-input-class-no-height">
+        <div class="ion-input-class-no-height" [class.input-error]="Form?.get('participantes')?.invalid  && validateFrom">
           <div class="list-people">
             <ion-item lines="none">
               <ion-list>
@@ -190,7 +221,7 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
         </div>
-        <div class="ion-input-class-no-height">
+        <div class="ion-input-class-no-height" [class.input-error]="Form?.get('participantes')?.invalid  && validateFrom">
           <div class="list-people">
             <ion-item lines="none">
               <ion-list>

src/app/shared/agenda/edit-event/edit-event.page.ts

@@ -10,7 +10,7 @@ import { SearchPage } from 'src/app/pages/search/search.page';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { Attachment } from 'src/app/models/attachment.model';
 import { ToastService } from 'src/app/services/toast.service';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import * as moment from 'moment';
 
 @Component({
@@ -43,6 +43,9 @@ export class EditEventPage implements OnInit {
   public stepMinute = 5;
   public stepSecond = 5;
 
+  Form: FormGroup;
+  validateFrom = false
+
   @Input() taskParticipants: EventPerson[];
   @Input() taskParticipantsCc: EventPerson[];
   @Input() profile:string;
@@ -147,8 +150,49 @@ export class EditEventPage implements OnInit {
     this.deleteTemporaryData();
   }
 
+
+  runValidation() {
+    this.validateFrom  = true
+  }
+
+  injectValidation() {
+
+    this.Form = new FormGroup({
+      Subject: new FormControl(this.postEvent.Subject, [
+        Validators.required,
+        // Validators.minLength(4)
+      ]),
+      Location: new FormControl(this.postEvent.Location, [
+        Validators.required,
+      ]),
+      CalendarName: new FormControl(this.postEvent.CalendarName),
+      Categories: new FormControl(this.postEvent.Categories[0], [
+        Validators.required
+      ]),
+      dateStart: new FormControl(this.dateStart, [
+        Validators.required
+      ]),
+      dateEnd: new FormControl(this.dateEnd, [
+        Validators.required
+      ]),
+      IsRecurring: new FormControl(this.postEvent.IsRecurring, [
+        Validators.required
+      ]),
+      participantes: new FormControl(this.taskParticipantsCc.concat(this.taskParticipants), [
+        Validators.required
+      ]),
+
+    })
+  }
+
+
   async save() {
 
+    this.injectValidation()
+    this.runValidation()
+
+    if(this.Form.invalid) return false
+
     this.getDatepickerData()
     this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);