Improve validation for publication

src/app/pages/publications/new-action/new-action.page.html

@@ -18,7 +18,7 @@
       
     </div>
 
-  <div class="ion-item-container">
+  <div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
     <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
   </div>
 
@@ -30,6 +30,7 @@
       <div class="ion-input-class">
         <ion-datetime 
           [(ngModel)]="folder.DateBegin"
+          class="d-block d-md-none"
           placeholder="Início"
           displayFormat="D MMM YYYY H:mm"
           minuteValues="0,15,30,45"
@@ -37,6 +38,25 @@
           min="2018" 
           max="2025">
         </ion-datetime>
+
+        <mat-form-field class="date-hour-picker d-none d-md-block">
+          <input matInput [ngxMatDatetimePicker]="picker1"
+            placeholder="Choose a date" 
+            [formControl]="dateControlStart"
+            [min]="minDate"
+            [disabled]="disabled"
+          >
+          <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+          <ngx-mat-datetime-picker #picker1 
+            [showSpinners]="showSpinners" 
+            [showSeconds]="showSeconds"
+            [stepHour]="stepHour" [stepMinute]="stepMinute" 
+            [stepSecond]="stepSecond"
+            [touchUi]="touchUi"
+            >
+          </ngx-mat-datetime-picker>
+        </mat-form-field>
+
       </div>
     </div>
   </div>
@@ -47,7 +67,8 @@
         <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
       </div>
       <div class="ion-input-class">
-        <ion-datetime 
+        <ion-datetime
+          class="d-block d-md-none"
           [(ngModel)]="folder.DateEnd"
           placeholder="Fim"
           displayFormat="D MMM YYYY H:mm"
@@ -56,6 +77,25 @@
           min="2018" 
           max="2025">
         </ion-datetime>
+
+        <mat-form-field class="date-hour-picker d-none d-md-block">
+          <input matInput [ngxMatDatetimePicker]="fim" 
+            placeholder="Choose a date" 
+            [formControl]="dateControlEnd"
+            [min]="endMinDate"
+            [disabled]="disabled"
+          >
+          <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
+          <ngx-mat-datetime-picker #fim 
+            [showSpinners]="showSpinners" 
+            [showSeconds]="showSeconds"
+            [stepHour]="stepHour" [stepMinute]="stepMinute" 
+            [stepSecond]="stepSecond"
+            [touchUi]="touchUi"
+            >
+          </ngx-mat-datetime-picker>
+        </mat-form-field>
+
       </div>
     </div>
   </div>