Implementação do FormControl

2026-04-18 12:37:53 +00:00 · 2020-09-01 20:37:47 +01:00
parent b019eeb84c
commit f66b690ff2
6 changed files with 134 additions and 112 deletions
@@ -16,7 +16,6 @@ import { HomePage } from './home.page';
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
-    /* IonicSelectableModule */
  ],
  declarations: [HomePage]
 })
@@ -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]
@@ -13,110 +13,116 @@
 </ion-header>

 <ion-content padding>
-  <div *ngIf="loadedEvent">
-  <ion-item-group>
-    <ion-item-sliding>
-    <ion-item>
-      <ion-label position="stacked">Assunto</ion-label>
-      <ion-input [(ngModel)]="loadedEvent.Subject"></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Descrição</ion-label>
-      <ion-input [(ngModel)]='loadedEvent.Body.Text'></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Localização</ion-label>
-      <ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Calendário</ion-label>
-      <ion-select placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
-        <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
-        <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Tipo do evento</ion-label>
-      <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
-        <ion-select-option value="Reunião">Reunião</ion-select-option>
-        <ion-select-option value="Viagem">Viagem</ion-select-option>
-        <ion-select-option value="Conferência">Conferência</ion-select-option>
-        <ion-select-option value="Encontro">Encontro</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-item>
-      <ion-label>Data Início</ion-label>
-      <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
-        displayFormat="D MMM YYYY H:mm"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
-    </ion-item>
-    <!-- <ion-item>
-      <ion-label position="stacked">Data Início: </ion-label>
-      <ion-input [(ngModel)]='loadedEvent.StartDate'></ion-input>
-    </ion-item> -->
-    <ion-item>
-        <ion-label>Data Fim</ion-label>
-        <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
-          displayFormat="D MMM YYYY HH:mm"
+    <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" 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>
+      </ion-item>
+      <ion-item>
+        <ion-label position="stacked">Localização</ion-label>
+        <ion-input [(ngModel)]='loadedEvent.Location'></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="stacked">Calendário</ion-label>
+        <ion-select placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+          <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
+          <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item>
+        <ion-label position="stacked">Tipo do evento</ion-label>
+        <ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+          <ion-select-option value="Reunião">Reunião</ion-select-option>
+          <ion-select-option value="Viagem">Viagem</ion-select-option>
+          <ion-select-option value="Conferência">Conferência</ion-select-option>
+          <ion-select-option value="Encontro">Encontro</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item>
+        <ion-label>Data Início</ion-label>
+        <ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
+          displayFormat="D MMM YYYY H:mm"
          monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
-    </ion-item>
-    <div class="div-card-button">
-      <ion-card (click)="openAttendees()">
-        <ion-card-header>
-          <ion-card-title center>
-            <div class="center">
-              <ion-icon name="person"></ion-icon>
-            </div>
-          </ion-card-title>
-        </ion-card-header>
-        <ion-card-content class="center">
-          Intervenientes
-        </ion-card-content>
-      </ion-card>
-      <ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
-        <ion-card-header>
-          <ion-card-title center>
-            <div class="center">
-              <ion-icon name="attach"></ion-icon>
-            </div>
-          </ion-card-title>
-        </ion-card-header>
-        <ion-card-content class="center">
-          Anexos
-        </ion-card-content>
-      </ion-card>
-    </div>
-    <!-- <div class="div-attach">
-      <ion-item>
-        <ion-icon name="add" slot="end"></ion-icon>
-        <ion-label class="attach-label">Intervenientes</ion-label>
      </ion-item>
-      <div id="AttachFiles"></div>
-      <ion-list [(ngModel)]="loadedEvent.EventType">
-        <ion-item lines="none">
-          <ion-icon name="attach"></ion-icon>
-          <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
-          <ion-icon name="trash" slot="end"></ion-icon>
-        </ion-item>
-      </ion-list>
-    </div>
-    <div class="div-attach">
+      <!-- <ion-item>
+        <ion-label position="stacked">Data Início: </ion-label>
+        <ion-input [(ngModel)]='loadedEvent.StartDate'></ion-input>
+      </ion-item> -->
      <ion-item>
-        <ion-icon name="add" slot="end"></ion-icon>
-        <ion-label class="attach-label">Anexos</ion-label>
+          <ion-label>Data Fim</ion-label>
+          <ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
+            displayFormat="D MMM YYYY HH:mm"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
      </ion-item>
-      <div id="AttachFiles"></div>
-      <ion-list [(ngModel)]="loadedEvent.EventType">
-        <ion-item lines="none">
-          <ion-icon name="attach"></ion-icon>
-          <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
-          <ion-icon name="trash" slot="end"></ion-icon>
+      <div class="div-card-button">
+        <ion-card (click)="openAttendees()">
+          <ion-card-header>
+            <ion-card-title center>
+              <div class="center">
+                <ion-icon name="person"></ion-icon>
+              </div>
+            </ion-card-title>
+          </ion-card-header>
+          <ion-card-content class="center">
+            Intervenientes
+          </ion-card-content>
+        </ion-card>
+        <ion-card [routerLink]="['/home/attachments', loadedEvent.EventId]">
+          <ion-card-header>
+            <ion-card-title center>
+              <div class="center">
+                <ion-icon name="attach"></ion-icon>
+              </div>
+            </ion-card-title>
+          </ion-card-header>
+          <ion-card-content class="center">
+            Anexos
+          </ion-card-content>
+        </ion-card>
+      </div>
+      <!-- <div class="div-attach">
+        <ion-item>
+          <ion-icon name="add" slot="end"></ion-icon>
+          <ion-label class="attach-label">Intervenientes</ion-label>
        </ion-item>
-      </ion-list>
-    </div> -->
-  </ion-item-sliding>
-  </ion-item-group>
-</div>
+        <div id="AttachFiles"></div>
+        <ion-list [(ngModel)]="loadedEvent.EventType">
+          <ion-item lines="none">
+            <ion-icon name="attach"></ion-icon>
+            <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
+            <ion-icon name="trash" slot="end"></ion-icon>
+          </ion-item>
+        </ion-list>
+      </div>
+      <div class="div-attach">
+        <ion-item>
+          <ion-icon name="add" slot="end"></ion-icon>
+          <ion-label class="attach-label">Anexos</ion-label>
+        </ion-item>
+        <div id="AttachFiles"></div>
+        <ion-list [(ngModel)]="loadedEvent.EventType">
+          <ion-item lines="none">
+            <ion-icon name="attach"></ion-icon>
+            <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
+            <ion-icon name="trash" slot="end"></ion-icon>
+          </ion-item>
+        </ion-list>
+      </div> -->
+    </ion-item-sliding>
+    </ion-item-group>
+  </div>
   <!-- Skeleton screen -->
 <div *ngIf="!loadedEvent">
  <div class="ion-padding custom-skeleton">
@@ -180,11 +186,7 @@
      </ion-label>
    </ion-item>
  </ion-list>
-
-  
-  
 </div>
-
 </ion-content>
 <ion-footer class="ion-no-border">
  <div class="event-detail-buttons">
@@ -74,4 +74,10 @@ ion-card{
  color: red;
  background-color: white;
  padding-right: 5px;
+}
+.error{
+  color:red;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 20px;
 }
@@ -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()
@@ -131,16 +141,19 @@ export class EventDetailPage implements OnInit {

  Save()
  {
-    this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async () => 
+    if (this.ionicForm.valid) 
+    {
+     this.eventsService.putEvent(this.loadedEvent, 2, 3).subscribe(async () => 
      {
        const alert = await this.alertController.create({
          cssClass: 'my-custom-class',
          header: 'Evento actualizado',
          buttons: ['OK']
        });
-    
+  
        await alert.present();
-      });  
+      });
+    }
  }

  back()
@@ -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>