mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 21:35:50 +00:00
Improve validation
This commit is contained in:
@@ -15,24 +15,41 @@
|
||||
</div>
|
||||
<ion-item-sliding class="overflow-y-auto" >
|
||||
<div class="px-20">
|
||||
<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)]="eventProcess.workflowInstanceDataFields.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">
|
||||
<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)]="eventProcess.workflowInstanceDataFields.Location"></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Error messages -->
|
||||
<!-- <span class="error ion-padding" >
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="container-div width-100">
|
||||
<div class="ion-item-class-2">
|
||||
@@ -67,6 +84,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="Form && validateFrom" >
|
||||
<div *ngIf="Form.get('participantes').invalid " class="input-errror-message">
|
||||
<div *ngIf="Form.get('participantes').errors?.required">
|
||||
Adicionar participant.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-div width-100">
|
||||
<div class="ion-item-class-2 width-100">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { AlertController, ModalController } from '@ionic/angular';
|
||||
import * as moment from 'moment';
|
||||
import { Attachment } from 'src/app/models/attachment.model';
|
||||
@@ -96,6 +96,9 @@ export class EditEventToApprovePage implements OnInit {
|
||||
|
||||
InstanceId: string;
|
||||
|
||||
Form: FormGroup;
|
||||
validateFrom = false
|
||||
|
||||
@Output() openAttendeesComponent = new EventEmitter<any>();
|
||||
@Output() clearContact = new EventEmitter<any>();
|
||||
@Output() setIntervenient = new EventEmitter<any>();
|
||||
@@ -189,7 +192,48 @@ export class EditEventToApprovePage implements OnInit {
|
||||
//this.deleteTemporaryData();
|
||||
}
|
||||
|
||||
|
||||
runValidation() {
|
||||
this.validateFrom = true
|
||||
}
|
||||
|
||||
injectValidation() {
|
||||
|
||||
this.Form = new FormGroup({
|
||||
Subject: new FormControl(this.eventProcess.workflowInstanceDataFields.Subject, [
|
||||
Validators.required,
|
||||
// Validators.minLength(4)
|
||||
]),
|
||||
Location: new FormControl(this.eventProcess.workflowInstanceDataFields.Location, [
|
||||
Validators.required,
|
||||
]),
|
||||
//CalendarName: new FormControl(this.postEvent.CalendarName),
|
||||
// Categories: new FormControl(this.postEvent.Categories[0], [
|
||||
// Validators.required
|
||||
// ]),
|
||||
dateStart: new FormControl(this.dateStart, [
|
||||
Validators.required
|
||||
]),
|
||||
dateEnd: new FormControl(this.dateEnd, [
|
||||
Validators.required
|
||||
]),
|
||||
// IsRecurring: new FormControl(this.postEvent.IsRecurring, [
|
||||
// Validators.required
|
||||
// ]),
|
||||
participantes: new FormControl(this.taskParticipantsCc.concat(this.taskParticipants), [
|
||||
Validators.required
|
||||
]),
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
save() {
|
||||
|
||||
this.injectValidation()
|
||||
this.runValidation()
|
||||
|
||||
if(this.Form.invalid) return false
|
||||
|
||||
// set dates to eventProcess object
|
||||
this.getDatepickerData()
|
||||
|
||||
|
||||
@@ -13,15 +13,27 @@
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<div class="ion-item-container">
|
||||
|
||||
<div class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
|
||||
<ion-input placeholder="Assunto*" [(ngModel)]="postEvent.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">
|
||||
<div class="ion-item-class-2 width-100 d-flex">
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class flex-grow-1">
|
||||
<div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Location')?.invalid && validateFrom ">
|
||||
<ion-input placeholder="Localização*" [(ngModel)]="postEvent.Location"></ion-input>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,8 +42,19 @@
|
||||
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">
|
||||
<div class="ion-item-class-2 width-100 d-flex">
|
||||
@@ -161,13 +184,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="Form && validateFrom" >
|
||||
<div *ngIf="Form.get('participantes').invalid " class="input-errror-message">
|
||||
<div *ngIf="Form.get('participantes').errors?.required">
|
||||
Adicionar participant.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" d-flex width-100">
|
||||
<div class="ion-item-class-2 width-100">
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class-no-height">
|
||||
<div class="ion-input-class-no-height" [class.input-error]="Form?.get('participantes')?.invalid && validateFrom">
|
||||
<div class="list-people">
|
||||
<ion-item lines="none">
|
||||
<ion-list>
|
||||
@@ -190,7 +221,7 @@
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class-no-height">
|
||||
<div class="ion-input-class-no-height" [class.input-error]="Form?.get('participantes')?.invalid && validateFrom">
|
||||
<div class="list-people">
|
||||
<ion-item lines="none">
|
||||
<ion-list>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { SearchPage } from 'src/app/pages/search/search.page';
|
||||
import { AttachmentsService } from 'src/app/services/attachments.service';
|
||||
import { Attachment } from 'src/app/models/attachment.model';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
@@ -43,6 +43,9 @@ export class EditEventPage implements OnInit {
|
||||
public stepMinute = 5;
|
||||
public stepSecond = 5;
|
||||
|
||||
Form: FormGroup;
|
||||
validateFrom = false
|
||||
|
||||
@Input() taskParticipants: EventPerson[];
|
||||
@Input() taskParticipantsCc: EventPerson[];
|
||||
@Input() profile:string;
|
||||
@@ -147,8 +150,49 @@ export class EditEventPage implements OnInit {
|
||||
this.deleteTemporaryData();
|
||||
}
|
||||
|
||||
|
||||
runValidation() {
|
||||
this.validateFrom = true
|
||||
}
|
||||
|
||||
injectValidation() {
|
||||
|
||||
this.Form = new FormGroup({
|
||||
Subject: new FormControl(this.postEvent.Subject, [
|
||||
Validators.required,
|
||||
// Validators.minLength(4)
|
||||
]),
|
||||
Location: new FormControl(this.postEvent.Location, [
|
||||
Validators.required,
|
||||
]),
|
||||
CalendarName: new FormControl(this.postEvent.CalendarName),
|
||||
Categories: new FormControl(this.postEvent.Categories[0], [
|
||||
Validators.required
|
||||
]),
|
||||
dateStart: new FormControl(this.dateStart, [
|
||||
Validators.required
|
||||
]),
|
||||
dateEnd: new FormControl(this.dateEnd, [
|
||||
Validators.required
|
||||
]),
|
||||
IsRecurring: new FormControl(this.postEvent.IsRecurring, [
|
||||
Validators.required
|
||||
]),
|
||||
participantes: new FormControl(this.taskParticipantsCc.concat(this.taskParticipants), [
|
||||
Validators.required
|
||||
]),
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
async save() {
|
||||
|
||||
this.injectValidation()
|
||||
this.runValidation()
|
||||
|
||||
if(this.Form.invalid) return false
|
||||
|
||||
this.getDatepickerData()
|
||||
this.postEvent.Attendees = this.taskParticipants.concat(this.taskParticipantsCc);
|
||||
|
||||
|
||||
@@ -42,16 +42,16 @@
|
||||
|
||||
</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 *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">
|
||||
@@ -144,13 +144,13 @@
|
||||
<!--
|
||||
[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" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom" >
|
||||
<div (click)="openFim()" class="ion-input-class flex-grow-1" >
|
||||
|
||||
<mat-form-field class="date-hour-picker">
|
||||
<input matInput [ngxMatDatetimePicker]="fim"
|
||||
placeholder="Choose a date"
|
||||
[formControl]="dateControlEnd"
|
||||
[min]="minDate" [max]="maxDate"
|
||||
[min]="endMinDate"
|
||||
[disabled]="disabled"
|
||||
>
|
||||
<mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
|
||||
@@ -190,7 +190,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="Form && validateFrom" >
|
||||
<div *ngIf="Form.get('participantes').invalid " class="input-errror-message">
|
||||
<div *ngIf="Form.get('participantes').errors?.required">
|
||||
|
||||
@@ -214,4 +214,5 @@
|
||||
|
||||
.materia-top {
|
||||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ export class NewEventPage implements OnInit {
|
||||
public touchUi = false;
|
||||
public enableMeridian = false;
|
||||
public minDate = new Date();
|
||||
public maxDate = '';
|
||||
public endMinDate = new Date(new Date().getTime() + 15 * 60000);
|
||||
public stepHour = 1;
|
||||
public stepMinute = 5;
|
||||
public stepSecond = 5;
|
||||
@@ -323,7 +323,7 @@ export class NewEventPage implements OnInit {
|
||||
|
||||
this.injectValidation()
|
||||
this.runValidation()
|
||||
|
||||
|
||||
if(this.Form.invalid) return false
|
||||
|
||||
this.getDatepickerData()
|
||||
|
||||
Reference in New Issue
Block a user