From a8daffdfd677e641823c36a9c793fba508d9afdf Mon Sep 17 00:00:00 2001
From: jordanPena <jordan.pena1@gmail.com>
Date: Thu, 14 Mar 2019 00:20:58 -0300
Subject: [PATCH] =?UTF-8?q?#10=20#21=20-=20incluindo=20valida=C3=A7=C3=A3o?=
 =?UTF-8?q?=20nos=20campos=20do=20formul=C3=A1rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/home/home.component.html | 60 ++++++++++++++++----------------
 src/app/home/home.component.ts   | 28 ++++++++++++---
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 6ab3c57..14b9159 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -82,30 +82,27 @@ <h4 class="modal-title text-center" *ngIf="registrationSteps == 4">Entidade Soci
 			</div>
 
 			<div class="form-group" *ngIf="registrationSteps == 2">
+				<small class="form-text">Razão Social</small>
 				<input type="text" formControlName="razaoSocial" name="razaoSocial" class="form-control form-control-sm"
 					id="razao-social" disabled>
-				<small class="form-text">Razão Social</small>
 			</div>
 
-			<!--<div class="form-group" *ngIf="registrationSteps == 2">
-					<input type="text" formControlName="atividadePrincipal" name="atividadePrincipal" class="form-control form-control-sm"
-					 id="atividade-principal" disabled>
-				</div>-->
-
 			<div class="form-group" *ngIf="registrationSteps == 2">
-				<input type="text" formControlName="nomeFantasia" name="nomeFantasia"
-					class="form-control font-weight-bold text-uppercase" id="nomeFantasia">
 				<small class="form-text">Nome fantasia</small>
+				<input type="text" formControlName="nomeFantasia" name="nomeFantasia"
+					class="form-control font-weight-bold text-uppercase" id="nomeFantasia" [ngClass]="aplicaCSSerro('nomeFantasia')">
+				<small class="invalid-feedback">Campo inválido</small>
 			</div>
 
 			<div class="form-group" *ngIf="registrationSteps == 2">
-				<input type="email" formControlName="email" name="email" class="form-control text-lowercase" id="email">
 				<small class="form-text">E-mail principal da ONG</small>
+				<input type="email" formControlName="email" name="email" class="form-control text-lowercase" id="email" [ngClass]="aplicaCSSerro('email')">
+				<small class="invalid-feedback">Campo inválido</small>
 			</div>
-
-			<!-- TODO: transformar em select -->
+			
 			<div class="form-group" *ngIf="registrationSteps == 2">
-				<select class="custom-select" formControlName="areaAtuacao" name="areaAtuacao" id="area-de-atuacao">
+				<small class="form-text">Área de atuação</small>
+				<select class="custom-select form-control" formControlName="areaAtuacao" name="areaAtuacao" id="area-de-atuacao" [ngClass]="validaSelecioneAreaAtuacao()">
 					<option value="selecione" selected="true" disabled="disabled">Selecione...</option>
 					<option value="Idosos">Idosos</option>
 					<option value="Crianças">Crianças</option>
@@ -123,7 +120,7 @@ <h4 class="modal-title text-center" *ngIf="registrationSteps == 4">Entidade Soci
 					<option value="Doação de Órgãos">Doação de Órgãos</option>
 					<option value="Outros">Outros</option>
 				</select>
-				<small class="form-text">Área de atuação</small>
+				<small class="invalid-feedback">Campo obrigatório</small>
 			</div>
 
 			<div *ngIf="registrationSteps == 2" style="height:135px;">
@@ -135,13 +132,13 @@ <h4 class="modal-title text-center" *ngIf="registrationSteps == 4">Entidade Soci
 					<span class="input-group-text" id="basic-addon3">ongbook.org/</span>
 				</div>
 				<input type="text" class="form-control" formControlName="sigla" name="sigla" id="sigla"
-					aria-describedby="basic-addon3" placeholder="Sigla da ONG">
+					aria-describedby="basic-addon3" placeholder="Sigla da ONG" [ngClass]="aplicaCSSerro('sigla')">
+				<small class="invalid-feedback">Campo inválido</small>
 			</div>
 
+			<small *ngIf="registrationSteps == 3">Coordenador responsável</small>
 			<div class="jumbotron pt-3 pb-2 mb-0" *ngIf="registrationSteps == 3" formGroupName="responsavel">
 
-				<h6 *ngIf="registrationSteps == 3">Coordenador responsável</h6>
-
 				<!-- div class="input-group form-group" *ngIf="registrationSteps == 3">
 						<input type="text" id="cpf" formControlName="cpf" name="cpf" #buscaCpf class="form-control" placeholder="CPF"
 						 aria-describedby="basic-addon2">
@@ -151,12 +148,15 @@ <h6 *ngIf="registrationSteps == 3">Coordenador responsável</h6>
 					</div -->
 
 				<div class="form-group" *ngIf="registrationSteps == 3">
-					<input type="text" class="form-control" placeholder="Nome" formControlName="nome" name="nome" id="nome">
+					<input type="text" class="form-control" placeholder="Nome" formControlName="nome" name="nome"
+						id="nome" [ngClass]="aplicaCSSerroInputsResponsavel('nome')">
+					<small class="invalid-feedback">Campo inválido</small>
 				</div>
 
 				<div class="form-group" *ngIf="registrationSteps == 3">
 					<input type="email" class="form-control" placeholder="E-mail" formControlName="emailResponsavel"
-						name="emailResponsavel" id="emailResponsavel">
+						name="emailResponsavel" id="emailResponsavel" [ngClass]="aplicaCSSerroInputsResponsavel('emailResponsavel')">
+					<small class="invalid-feedback">Campo inválido</small>
 				</div>
 
 				<!--<div class="form-group" *ngIf="registrationSteps == 3">
@@ -165,8 +165,9 @@ <h6 *ngIf="registrationSteps == 3">Coordenador responsável</h6>
 				</div> -->
 
 				<div class="form-group" *ngIf="registrationSteps == 3">
-					<input type="password" class="form-control" placeholder="Senha" formControlName="senhaOk" name="senhaOk"
-						id="senhaOk">
+					<input type="password" class="form-control" placeholder="Senha" formControlName="senhaOk"
+						name="senhaOk" id="senhaOk" [ngClass]="aplicaCSSerroInputsResponsavel('senhaOk')">
+					<small class="invalid-feedback">Campo inválido</small>
 				</div>
 
 			</div>
@@ -197,16 +198,15 @@ <h6 *ngIf="registrationSteps == 3">Coordenador responsável</h6>
 			<div class="text-right pr-0" [ngClass]="{'col-6': registrationSteps == 1,'pl-0 col-12': registrationSteps != 1 }">
 				<div class="form-group mb-1">
 					<button type="button" class="btn btn-sm btn-outline-secondary mr-2"
-						*ngIf="registrationSteps != 1 && registrationSteps != 4" (click)="backStep();">Voltar</button>
-					<button type="button" class="btn btn-sm btn-success" *ngIf="registrationSteps == 2" (click)="nextStep();"
-						[disabled]="formCadastro.controls['areaAtuacao'].value == 'selecione'">Avançar</button>
-					<!-- <button type="submit" class="btn btn-sm btn-success" *ngIf="registrationSteps == 3"
-						[disabled]="!formCadastro.valid">Cadastrar</button> -->
-
-					<!-- SÓ PARA TESTE - CRIAR PASSO 4 -->
-					<button class="btn btn-sm btn-success" *ngIf="registrationSteps == 3" (click)="nextStep();">Passo 4</button>
-					<!-- End: SÓ PARA TESTE - CRIAR PASSO 4 -->
-
+						*ngIf="registrationSteps != 1 && registrationSteps != 'step4'"
+						(click)="backStep();">Voltar</button>
+					<button type="button" class="btn btn-sm btn-success" *ngIf="registrationSteps == 2"
+						(click)="nextStep();"
+						[disabled]="formCadastro.controls['areaAtuacao'].value == 'selecione' 
+							|| !formCadastro.controls['email'].valid 
+							|| !formCadastro.controls['nomeFantasia'].valid">Avançar</button>
+					<button type="submit" class="btn btn-sm btn-success" *ngIf="registrationSteps == 3"
+						[disabled]="!formCadastro.valid">Cadastrar</button>
 					<small id="emailHelp" class="form-text text-muted text-right mt-2" style="font-size:10px"
 						*ngIf="registrationSteps != 1 && registrationSteps != 4">Passo
 						{{ registrationSteps }}/4.</small>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 521cc66..39b3803 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -27,6 +27,8 @@ export class HomeComponent implements OnInit {
 
 	public modalRef: BsModalRef;
 	public customPatterns = {'0': { pattern: new RegExp('\[0-9\]')}};
+	
+	//Validators.pattern(new RegExp('^1234$'))
 
 	public formCadastro: FormGroup;
 
@@ -39,19 +41,19 @@ export class HomeComponent implements OnInit {
 			razaoSocial: new FormControl(''),
 			atividadePrincipal: new FormControl(''),
 			areaAtuacao: new FormControl('selecione', [Validators.required]),
-			sigla: new FormControl('', [Validators.required]),
-			nomeFantasia: new FormControl(''),
+			sigla: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(10)]),
+			nomeFantasia: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(125)]),
 			email: new FormControl('', [Validators.required, Validators.email]),
 			lat: new FormControl(''),
 			lng: new FormControl(''),
 			receita: new FormControl(''),
 			responsavel: new FormGroup({
 				uid: new FormControl(''),
-				nome: new FormControl('', [Validators.required]),
+				nome: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(125)]),
 				cpf: new FormControl(''),
 				emailResponsavel: new FormControl('', [Validators.required, Validators.email]),
 				senha: new FormControl(''),
-				senhaOk: new FormControl('', [Validators.required])
+				senhaOk: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(125)])
 			})
 		});
 	}
@@ -167,6 +169,24 @@ console.log(this.formCadastro)
 
 	}
 
+	validaSelecioneAreaAtuacao(){
+		return {
+			'is-invalid': this.formCadastro.get('areaAtuacao').touched && this.formCadastro.get('areaAtuacao').value == 'selecione'
+		}
+	}
+	
+	aplicaCSSerro(campo: string){
+		return {
+			'is-invalid': this.formCadastro.get(campo).touched && !this.formCadastro.get(campo).valid 
+		}
+	}
+
+	aplicaCSSerroInputsResponsavel(campo: string){
+		return {
+			'is-invalid': this.formCadastro.controls['responsavel'].get(campo).touched && !this.formCadastro.controls['responsavel'].get(campo).valid 
+		}
+	}
+
 	// test envio e-mail Cloud Functions firebase
 	enviaEmail() {
 		this.EnviaEmailService.sendEmail();