Skip to content

Commit

Permalink
Ongbook#10 Ongbook#21 - incluindo validação nos campos do formulário
Browse files Browse the repository at this point in the history
  • Loading branch information
@JordanPena @edoura
JordanPena authored and edoura committed Mar 22, 2019
1 parent 418fa61 commit a8daffd
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 34 deletions.
60 changes: 30 additions & 30 deletions src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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;">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 24 additions & 4 deletions src/app/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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)])
})
});
}
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit a8daffd

Please sign in to comment.