Improve validation for desktop

This commit is contained in:
Peter Maquiran
2021-07-05 11:15:55 +01:00
parent 382104d058
commit 2d4216a6b0
8 changed files with 66 additions and 35 deletions
@@ -9,24 +9,41 @@
</div>
<div class="overflow-y-auto content-default-padding">
<div class="ion-item-container width-100">
<div class="ion-item-container width-100" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
<ion-input placeholder="Assunto*" [(ngModel)]="postData.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 width-100">
<div class="ion-item-class-2 width-100">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class" [class.input-error]="Form?.get('Location')?.invalid && validateFrom ">
<ion-input placeholder="Localização*" [(ngModel)]="postData.Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="formLocationSatus">
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">
@@ -34,7 +51,7 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class" >
<ion-select
class="d-block d-md-none"
[(ngModel)]="postData.CalendarName"
@@ -46,7 +63,7 @@
</ion-select>
<mat-form-field floatLabel="never" class="d-none d-md-block width-100">
<mat-form-field floatLabel="never" appearance="none" class="d-none d-md-block width-100">
<mat-select placeholder="Selecione agenda" [(ngModel)]="postData.CalendarName" >
<mat-option value="Oficial">
Oficial
@@ -79,11 +96,11 @@
value="2020-11-19T11:06Z">
</ion-datetime>
<mat-form-field class="width-100 date-hour-picker d-none d-md-block">
<mat-form-field class="width-100 date-hour-picker d-md-block">
<input matInput [ngxMatDatetimePicker]="picker1"
placeholder="Choose a date*"
[formControl]="dateControlStart"
[min]="minDate" [max]="maxDate"
[min]="minDate"
[disabled]="disabled"
>
<mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
@@ -105,7 +122,7 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<div class="ion-input-class flex-grow-1">
<ion-datetime
class="d-block d-md-none"
placeholder="Fim*"
@@ -118,11 +135,11 @@
value="2020-11-19T11:06Z">
</ion-datetime>
<mat-form-field class="date-hour-picker">
<mat-form-field class="date-hour-picker width-100 d-none d-md-block">
<input matInput [ngxMatDatetimePicker]="fim"
placeholder="Choose a date*S"
[formControl]="dateControlEnd"
[min]="minDate" [max]="maxDate"
[min]="endMinDate"
[disabled]="disabled"
>
<mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
@@ -168,6 +185,7 @@
value="false"
interface="action-sheet"
required
appearance="none"
>
<mat-select placeholder="Selecione repetição*" [(ngModel)]="postData.IsRecurring" >
<mat-option value="false">