improve form validation

This commit is contained in:
Peter Maquiran
2021-07-14 09:46:03 +01:00
parent d9f1ef7bba
commit 6176112001
5 changed files with 27 additions and 49 deletions
@@ -42,23 +42,13 @@
</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">
<div class="ion-item-class-2 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1 justify-center align-center material-inputs ">
<div class="ion-input-class flex-grow-1 justify-center align-center material-inputs " [class.input-error]="Form?.get('CalendarName')?.invalid && validateFrom ">
<mat-form-field appearance="none" class="width-100" color="ion-color-secondary" placeholder="Selecione agenda">
<mat-select [(value)]="postEvent.CalendarName" >
@@ -117,7 +107,7 @@
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1"
placeholder="Choose a date"
[formControl]="dateControlStart"
[(ngModel)]="postEvent.StartDate"
[min]="minDate"
[disabled]="disabled"
>
@@ -144,12 +134,12 @@
<!--
[className]="Form?.get('Subject')?.invalid ? 'input-error ion-input-class flex-grow-1' : 'ion-input-class ion-input-class flex-grow-1' "
-->
<div (click)="openFim()" class="ion-input-class flex-grow-1 justify-center align-center materia-top">
<div (click)="openFim()" class="ion-input-class flex-grow-1 justify-center align-center materia-top" [class.input-error]="Form?.get('dateEnd')?.invalid && validateFrom ">
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim"
placeholder="Choose a date"
[formControl]="dateControlEnd"
[(ngModel)]="postEvent.EndDate"
[min]="endMinDate"
[disabled]="disabled"
>
@@ -169,7 +159,6 @@
</div>
<!-- <div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
@@ -187,15 +176,14 @@
</div>
</div> -->
<div class="container-div width-100">
<div class="ion-item-class-2 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
{{ this.postEvent.EventRecurrence.Type }}
<div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('dateOccurrence')?.invalid && validateFrom ">
<mat-form-field appearance="none" floatLabel="never" class="width-100" value="false" interface="action-sheet" required>
<mat-select placeholder="Selecione repetição*"
@@ -254,13 +242,13 @@
</div>
</div>
<div *ngIf="Form && validateFrom" class="container-div width-100">
<!-- <div *ngIf="Form && validateFrom" class="container-div width-100">
<div *ngIf="Form.get('participantes').invalid " class="input-errror-message">
<div *ngIf="Form.get('participantes').errors?.required">
Adicionar participante.
</div>
</div>
</div>
</div> -->
<div class="container-div width-100">
<div class="ion-item-class-2 d-flex">