Implementação do FormControl

src/app/home/home.module.ts

@@ -16,7 +16,6 @@ import { HomePage } from './home.page';
     FormsModule,
     IonicModule,
     HomePageRoutingModule,
-    /* IonicSelectableModule */
   ],
   declarations: [HomePage]
 })

src/app/pages/events/event-detail/event-detail.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -8,11 +8,13 @@ import { EventDetailPageRoutingModule } from './event-detail-routing.module';
 
 import { EventDetailPage } from './event-detail.page';
 
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    ReactiveFormsModule,
     EventDetailPageRoutingModule
   ],
   declarations: [EventDetailPage]

src/app/pages/events/event-detail/event-detail.page.html

@@ -16,10 +16,16 @@
     <div *ngIf="loadedEvent">
     <ion-item-group>
       <ion-item-sliding>
+        <form [formGroup]="ionicForm" (ngSubmit)="submitForm()" novalidate>
           <ion-item>
             <ion-label position="stacked">Assunto</ion-label>
-      <ion-input [(ngModel)]="loadedEvent.Subject"></ion-input>
+            <ion-input [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
           </ion-item>
+          <!-- Error messages -->
+          <span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
+            Campo obrigatório
+          </span>
+        </form>
       <ion-item>
         <ion-label position="stacked">Descrição</ion-label>
         <ion-input [(ngModel)]='loadedEvent.Body.Text'></ion-input>
@@ -180,11 +186,7 @@
       </ion-label>
     </ion-item>
   </ion-list>
-
-  
-  
 </div>
-
 </ion-content>
 <ion-footer class="ion-no-border">
   <div class="event-detail-buttons">

src/app/pages/events/event-detail/event-detail.page.scss

@@ -75,3 +75,9 @@ ion-card{
   background-color: white;
   padding-right: 5px;
 }
+.error{
+  color:red;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 20px;
+}

src/app/pages/events/event-detail/event-detail.page.ts

@@ -7,6 +7,7 @@ import { EventBody } from 'src/app/models/eventbody.model';
 import { AlertController, ModalController } from '@ionic/angular';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
 
 @Component({
   selector: 'app-event-detail',
@@ -17,16 +18,25 @@ export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
   backURL: string;
+  ionicForm: FormGroup;
+  isSubmitted = false;
 
   minDate: Date;
 
-  constructor(public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService, private modalCtrl: ModalController) { 
+  constructor(public formBuilder: FormBuilder, public alertController: AlertController, private router: Router, private activatedRoute: ActivatedRoute, private eventsService: EventsService, private modalCtrl: ModalController) { 
     this.loadedEvent = new Event();
     this.loadedEvent.Body = new EventBody();
   }
 
   ngOnInit() {
     this.loadEvent();
+    this.ionicForm = this.formBuilder.group({
+      subject: ['', [Validators.required]]
+    })
+  }
+
+  get errorControl() {
+    return this.ionicForm.controls;
   }
 
   loadEvent()
@@ -130,6 +140,8 @@ export class EventDetailPage implements OnInit {
   }
 
   Save()
+  {
+    if (this.ionicForm.valid) 
     {
      this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async () => 
       {
@@ -142,6 +154,7 @@ export class EventDetailPage implements OnInit {
         await alert.present();
       });
     }
+  }
 
   back()
   {

src/app/pages/view-event/view-event.page.html

@@ -10,15 +10,15 @@
 <ion-content>
     <ion-item>
       <ion-label>Assunto</ion-label>
-      <ion-input></ion-input>
+      <ion-input type="text" required></ion-input>
     </ion-item>
     <ion-item>
       <ion-label>Descrição</ion-label>
-      <ion-input></ion-input>
+      <ion-input type="text" required></ion-input>
     </ion-item>
     <ion-item>
       <ion-label>Localização</ion-label>
-      <ion-input></ion-input>
+      <ion-input type="text" required></ion-input>
     </ion-item>
     <ion-item>
       <ion-label>Intervenientes</ion-label>