Skip to content

Commit 7168eae

Browse files
gnllucenagnllucena
committed
Validations e mensagens, bug na regex de data.validation.
1 parent 3b76304 commit 7168eae

File tree

11 files changed

+60
-20
lines changed

11 files changed

+60
-20
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"bootstrap": "^4.1.3",
2727
"classlist.js": "^1.1.20150312",
2828
"core-js": "^2.5.4",
29+
"ngx-mask": "^7.0.1",
2930
"rxjs": "~6.2.0",
3031
"web-animations-js": "^2.3.1",
3132
"zone.js": "~0.8.26"

‎src/app/modules/validations/cpf.validation.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ function validation(): ValidatorFn {
77
const cpf = control.value;
88

99
if (!cpf) {
10-
return { CpfInvalid: { value: cpf } };
10+
return null;
1111
}
1212

1313
const value = cpf.replace(/[^0-9]/g, '');
1414

1515
if (value.length !== 11) {
16-
return { CpfInvalid: { value: cpf } };
16+
return { invalid: { value: cpf } };
1717
}
1818

1919
if ((value === '00000000000') ||
@@ -27,7 +27,7 @@ function validation(): ValidatorFn {
2727
(value === '88888888888') ||
2828
(value === '99999999999')) {
2929

30-
return { CpfInvalid: { value: cpf } };
30+
return { invalid: { value: cpf } };
3131
}
3232

3333
let j: number = 10;
@@ -81,7 +81,7 @@ function validation(): ValidatorFn {
8181
auxiliar = auxiliar + digito2;
8282

8383
if (cpf !== auxiliar) {
84-
return { CpfInvalid: { value: cpf } };
84+
return { invalid: { value: cpf } };
8585
}
8686

8787
return null;

‎src/app/modules/validations/date.validation.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ function validation(): ValidatorFn {
88
const date = control.value;
99

1010
if (!date) {
11-
return { DateInvalid: { value: date } };
11+
return null;
1212
}
1313

1414
let regex = RegExp('(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)');
1515

16-
if (regex.test(date)) {
17-
return { DateInvalid: { value: date } };
18-
}
16+
// if (!regex.test(date)) {
17+
// return { invalid: { value: date } };
18+
// }
1919

2020
return null;
2121
};

‎src/app/routes/identity/identity-page/identity-page.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ <h6 class="h3">Welcome back</h6>
1616
<input formControlName="Email" autofocus type="email" class="form-control" id="input-email" placeholder="name@example.com" autocomplete="off">
1717
</div>
1818
<ng-container *ngIf="submitted && form.controls.Email.errors">
19-
<small *ngIf="form.controls.Email.errors.required">Email is required</small>
20-
<small *ngIf="form.controls.Email.errors.email">Email must be a valid email address</small>
19+
<small *ngIf="form.controls.Email.errors.required" class="d-inline-block">Email is required</small>
20+
<small *ngIf="form.controls.Email.errors.email" class="d-inline-block">Email must be a valid email address</small>
2121
</ng-container>
2222
</div>
2323
<div class="form-group mb-4">

‎src/app/routes/users/users-add/users-add.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class UsersAddComponent {
4343
Email: this.formBuilder.control({
4444
value: '',
4545
disabled: false,
46-
}, [ Validators.required, Validators.email ]),
46+
}, [ Validators.required, Validators.email, Validators.maxLength(30) ]),
4747
Document: this.formBuilder.control({
4848
value: '',
4949
disabled: false

‎src/app/routes/users/users-edit/users-edit.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ export class UsersEditComponent {
3838
Name: this.formBuilder.control({
3939
value: this.user.Name,
4040
disabled: false
41-
}, [ Validators.required ]),
41+
}, [ Validators.required, Validators.maxLength(30) ]),
4242
Email: this.formBuilder.control({
4343
value: this.user.Email,
4444
disabled: false,
45-
}, [ Validators.required, Validators.email ]),
45+
}, [ Validators.required, Validators.email, Validators.maxLength(30) ]),
4646
Document: this.formBuilder.control({
4747
value: this.user.Document,
4848
disabled: true

‎src/app/routes/users/users-form/users-form.component.html

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,51 @@
55
<div class="form-group col-md-6">
66
<label for="Name">Name</label>
77
<input formControlName="Name" type="text" class="form-control" placeholder="User's name">
8+
<ng-container *ngIf="submitted && form.controls.Name.errors">
9+
<small *ngIf="form.controls.Name.errors.required" class="d-inline-block">Name is required</small>
10+
<small *ngIf="form.controls.Name.errors.maxlength" class="d-inline-block">Name must not have more than 30 caractheres</small>
11+
</ng-container>
812
</div>
913
<div class="form-group col-md-6">
1014
<label for="Email">Email</label>
1115
<input formControlName="Email" type="text" class="form-control" placeholder="User's email">
16+
<ng-container *ngIf="submitted && form.controls.Email.errors">
17+
<small *ngIf="form.controls.Email.errors.required" class="d-inline-block">Email is required</small>
18+
<small *ngIf="form.controls.Email.errors.email" class="d-inline-block">Email must be a valid email address</small>
19+
<small *ngIf="form.controls.Email.errors.maxlength" class="d-inline-block">Email must not have more than 30 caractheres</small>
20+
</ng-container>
1221
</div>
1322
</div>
1423

1524
<div class="form-row">
16-
<div class="form-group col-md-3">
25+
<div class="form-group col-md-4">
1726
<label for="Document">Document</label>
18-
<input formControlName="Document" type="text" class="form-control" placeholder="User's document">
27+
<input formControlName="Document" mask="000.000.000-00" type="text" class="form-control" placeholder="User's document">
28+
<ng-container *ngIf="submitted && form.controls.Document.errors">
29+
<small *ngIf="form.controls.Document.errors.required" class="d-inline-block">Document is required</small>
30+
<small *ngIf="form.controls.Document.errors.invalid" class="d-inline-block">Document format is invalid</small>
31+
</ng-container>
1932
</div>
20-
<div class="form-group col-md-3">
33+
<div class="form-group col-md-4">
2134
<label for="Birthdate">Birthdate</label>
22-
<input formControlName="Birthdate" type="text" class="form-control" placeholder="User's birthdate">
35+
<input formControlName="Birthdate" mask="00/00/0000" [dropSpecialCharacters]="false" type="text" class="form-control" placeholder="User's birthdate">
36+
<ng-container *ngIf="submitted && form.controls.Birthdate.errors">
37+
<small *ngIf="form.controls.Birthdate.errors.required" class="d-inline-block">Birthdate is required</small>
38+
<small *ngIf="form.controls.Birthdate.errors.invalid" class="d-inline-block">Birthdate format is invalid</small>
39+
</ng-container>
2340
</div>
41+
</div>
2442

43+
<div class="form-row">
2544
<div class="form-group col-md-6">
2645
<label for="Country">Country of birth</label>
2746
<select formControlName="Country" class="form-control custom-select">
2847
<option value="">Select country of birth</option>
2948
<option *ngFor="let country of countries" [ngValue]="country.Name">{{ country.Name }}</option>
3049
</select>
50+
<ng-container *ngIf="submitted && form.controls.Country.errors">
51+
<small *ngIf="form.controls.Country.errors.required" class="d-inline-block">Country is required</small>
52+
</ng-container>
3153
</div>
3254
</div>
3355

‎src/app/routes/users/users-form/users-form.component.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewEncapsulation, Output, EventEmitter, Input } from '@angular/core';
2-
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
2+
import { FormGroup } from '@angular/forms';
33
import { Country } from 'src/app/domain/country';
44

55
@Component({
@@ -14,9 +14,17 @@ export class UsersFormComponent {
1414
@Input() parent: String;
1515
@Output() validatedEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
1616

17+
public submitted = false;
18+
1719
constructor() { }
1820

1921
submit(): void {
22+
this.submitted = true;
23+
24+
if (!this.form.valid) {
25+
return;
26+
}
27+
2028
this.validatedEvent.emit(this.form);
2129
}
2230
}

‎src/app/routes/users/users-list/users-list.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="col-md-3">
1919
<div class="form-group">
2020
<label class="small">Document</label>
21-
<label>{{ user.Document }}</label>
21+
<label>{{ user.Document | mask: '000.000.000-00' }}</label>
2222
</div>
2323
</div>
2424
<div class="col-2 col-md-1">

‎src/app/routes/users/users.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11

2+
import { NgxMaskModule } from 'ngx-mask'
23
import { NgModule } from '@angular/core';
34
import { RouterModule, Routes } from '@angular/router';
45

@@ -40,7 +41,8 @@ const appRoutes: Routes = [
4041
CommonModule,
4142
FormsModule,
4243
ReactiveFormsModule,
43-
RouterModule.forChild(appRoutes)
44+
RouterModule.forChild(appRoutes),
45+
NgxMaskModule.forRoot()
4446
],
4547
providers: [
4648
HttpService,

0 commit comments

Comments
 (0)