doneit-web/src/app/pages/cal-modal/cal-modal.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-icon name="chevron-back" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Novo Evento</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="div-ion-content">
  <form [formGroup]="ionicForm" novalidate>
    <ion-item>
      <ion-label position="floating">Assunto <span class="span-color">*</span></ion-label>
      <ion-input formControlName="subject" type="text" [(ngModel)]="postEvent.Subject" required></ion-input>
    </ion-item>
    <!-- Error messages -->
    <span class="error ion-padding" *ngIf="formSubjectSatus">
      Campo obrigatório
    </span>     
    <ion-item>
      <ion-label position="floating">Descrição <span class="span-color">*</span></ion-label>
      <ion-input formControlName="description" type="text" [(ngModel)]="postEvent.Body.Text" required></ion-input>
    </ion-item>
    <!-- Error messages -->
    <span class="error ion-padding" *ngIf="formDescriptionSatus">
      Campo obrigatório
    </span>  
    <ion-item>
      <ion-label position="floating">Localização <span class="span-color">*</span></ion-label>
      <ion-input formControlName="location" type="text" [(ngModel)]="postEvent.Location" required></ion-input>
    </ion-item>
    <!-- Error messages -->
    <span class="error ion-padding" *ngIf="formLocationSatus">
      Campo obrigatório
    </span>
    <!-- <span class="error ion-padding" *ngIf="errorControl.location.errors?.required">
      Campo obrigatório
    </span> --> 
    <ion-item>
      <ion-label position="floating">Selecione a Agenda <span class="span-color">*</span></ion-label>
      <ion-select selectedText="{{postEvent.CalendarName}}" formControlName="agenda" [(ngModel)]="postEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar" required>
        <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
        <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
      </ion-select>
    </ion-item>
    <!-- Error messages -->
    <span class="error ion-padding" *ngIf="formEventTypeSatus">
      Campo obrigatório
    </span>
    <!-- <span class="error ion-padding" *ngIf="errorControl.agenda.errors?.required">
      Campo obrigatório
    </span>  -->
    <ion-item>
      <ion-label position="floating">Tipo de evento <span class="span-color">*</span></ion-label>
      <ion-select formControlName="eventtype" [(ngModel)]="postEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar" required>
        <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>
    <!-- Error messages -->
    <span class="error ion-padding" *ngIf="formEventTypeSatus">
      Campo obrigatório
    </span>
    <!-- <span class="error ion-padding" *ngIf="errorControl.eventtype.errors?.required">
      Campo obrigatório
    </span> --> 
    <ion-item>
      <ion-label position="floating">Data Início <span class="span-color">*</span></ion-label>
      <ion-datetime placeholder="{{postEvent.StartDate | date: 'dd MMM yyyy H:mm'}}" formControlName="startdate" [(ngModel)]="postEvent.StartDate" min="2020" max="2100"
        displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
        required>
      </ion-datetime>
    </ion-item>
    <!-- Error messages -->
    <!-- <span class="error ion-padding" *ngIf="errorControl.startdate.errors?.required">
      Campo obrigatório
    </span> --> 
    <ion-item>
      <ion-label position="floating">Data Fim <span class="span-color">*</span></ion-label>
      <ion-datetime placeholder="{{postEvent.EndDate | date: 'dd MMM yyyy H:mm'}}" formControlName="enddate" [(ngModel)]="postEvent.EndDate" min="2020" max="2100"
        displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
        required></ion-datetime>
    </ion-item>
    <!-- Error messages -->
    <!-- <span class="error ion-padding" *ngIf="errorControl.enddate.errors?.required">
      Campo obrigatório
    </span>  -->
  </form>
  <div class="div-attach">
    <ion-item lines="none">
      <ion-icon name="add" slot="end" (click)="openAttendees()"></ion-icon>
      <ion-label class="attach-label">Participantes</ion-label>
    </ion-item>
    <div id="AttachFiles"></div>
  </div>
  <div class="div-attach">
    <ion-item lines="none">
      <ion-icon name="add" slot="end" (click)="showAlert()"></ion-icon>
      <ion-label class="attach-label">Anexos</ion-label>
    </ion-item>
    <div id="AttachFiles"></div>
  </div>
</div> 
</ion-content>
<ion-footer class="ion-no-border">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-label>Cancelar</ion-label>
        <ion-icon name="close" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ viewTitle }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="save()">
        <ion-label>Enviar</ion-label>
        <ion-icon name="checkmark" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>