feat: Ongbook#8 Ongbook#14 - implementação de mascara e validacao inp…

…ut cnpj

package.json

@@ -29,6 +29,7 @@
     "jquery": "^3.3.1",
     "js-marker-clusterer": "^1.0.0",
     "ngx-bootstrap": "^3.0.1",
+    "ngx-mask": "^7.6.5",
     "rxjs": "6.3.3",
     "zone.js": "~0.8.26"
   },

src/app/app.module.ts

@@ -17,6 +17,8 @@ import { EntidadeService } from './entidade.service';
 import { AgmCoreModule } from '@agm/core';
 import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
 
+import {NgxMaskModule} from 'ngx-mask';
+
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ModalModule } from 'ngx-bootstrap/modal';
@@ -42,6 +44,7 @@ import { ModalEntityProfileComponent } from './maps/modal-entity-profile/modal-e
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
+    NgxMaskModule.forRoot(),
     BsDropdownModule.forRoot(),
     TooltipModule.forRoot(),
     ModalModule.forRoot(),

src/app/home/home.component.html

@@ -72,12 +72,14 @@ <h4 class="modal-title text-center" *ngIf="registrationSteps == 4">Entidade Soci
 
 			<div class="input-group form-group" *ngIf="registrationSteps == 1">
 
-				<input type="text" id="cnpj" formControlName="cnpj" maxlength="14" name="cnpj" #cnpj
-					class="form-control form-control-lg" placeholder="CNPJ - apenas números" aria-describedby="basic-addon2">
+				<input type="text" id="cnpj" formControlName="cnpj" name="cnpj" 
+					class="form-control form-control-lg" placeholder="CNPJ - apenas números"
+					aria-describedby="basic-addon2" maxlength="18" mask='00.000.000/0000-00'>
 
 				<div class="input-group-append">
-					<button class="btn btn-secondary" type="button" (click)="buscaCnpj(cnpj.value);"><i
-							class="fas fa-search"></i></button>
+					<button class="btn btn-secondary" type="button" (click)="buscaCnpj();"
+							[disabled]="!formCadastro.controls['cnpj'].valid">
+						<i class="fas fa-search"></i></button>
 				</div>
 			</div>
 

src/app/home/home.component.ts

@@ -27,8 +27,6 @@ export class HomeComponent implements OnInit {
 
 	public modalRef: BsModalRef;
 	public customPatterns = {'0': { pattern: new RegExp('\[0-9\]')}};
-
-	//Validators.pattern(new RegExp('^1234$'))
 
 	public formCadastro: FormGroup;
 
@@ -37,7 +35,7 @@ export class HomeComponent implements OnInit {
 		private authService: AuthService, private entidadeService: EntidadeService) {
 
 		this.formCadastro = new FormGroup({
-			cnpj: new FormControl('', [Validators.required]),
+			cnpj: new FormControl('', [Validators.required, Validators.pattern(new RegExp('^\\d{14}$'))]),
 			razaoSocial: new FormControl(''),
 			atividadePrincipal: new FormControl(''),
 			areaAtuacao: new FormControl('selecione', [Validators.required]),
@@ -64,9 +62,15 @@ export class HomeComponent implements OnInit {
 		this.modalRef = this.modalService.show(templateEntityRegister, { backdrop: 'static', keyboard: false });
 	}
 
-	buscaCnpj(value: any) {
+	buscaCnpj() {
+
+		let cnpj = this.formCadastro.controls['cnpj'].value;
 
-		this.BuscaCnpjService.getCnpj(value).subscribe((res) => {
+		this.BuscaCnpjService.getCnpj(cnpj).subscribe((res) => {
+
+			//TODO - Validar natureza juridica cnpj
+			//Validators.pattern(new RegExp('^399-9'))
+			//Validators.pattern(new RegExp('^306-9'))
 
 			//concat for google maps
 			const endereco = res['logradouro'] + ', ' + res['numero'] + ' - ' + res['bairro'] + ', ' + res['municipio'] + '-' + res['uf'];
@@ -100,8 +104,6 @@ export class HomeComponent implements OnInit {
 	backStep() {
 		if (this.registrationSteps === 3) {
 			this.registrationSteps = 2;
-			console.log(this.formCadastro)
-			console.log(this.formCadastro.controls['areaAtuacao'].value)
 		} else if (this.registrationSteps === 2) {
 			this.formCadastro.reset();
 			this.formCadastro.controls['areaAtuacao'].setValue('selecione');
@@ -123,7 +125,7 @@ export class HomeComponent implements OnInit {
 	}
 
 	onSubmit() {
-console.log(this.formCadastro)
+		
 		let email = this.formCadastro.controls['responsavel'].value['emailResponsavel'];
 		let senha = this.formCadastro.controls['responsavel'].value['senhaOk'];