Skip to content

Commit 3e700c7

Browse files
Yu0614Yu0614
authored
Merge pull request #1 from Yu0614/feature/add_validations
feat: introduce form validate
2 parents 0cb3d17 + 3198ab2 commit 3e700c7

File tree

4 files changed

+142
-18
lines changed

4 files changed

+142
-18
lines changed

‎src/app/reactive/reactive.component.html‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,63 @@ <h1>Welcome</h1>
77
<!-- ① using formGroup to link form with component -->
88
<form class="form" [formGroup]="loginForm" (ngSubmit)="submit()">
99
<!-- ② using formControlName to link form with component's attribute -->
10-
<input type="email" placeholder="mail" formControlName="mail" />
11-
<input type="password" placeholder="Password" formControlName="password" />
12-
<button class="button" type="submit" id="login-button" [disabled]="!loginForm.valid">Login</button>
10+
<input
11+
type="email"
12+
placeholder="mail"
13+
formControlName="mail"
14+
required
15+
/>
16+
<input
17+
type="password"
18+
placeholder="Password"
19+
formControlName="password"
20+
required
21+
/>
22+
<button class="button" type="submit" id="login-button">
23+
Login
24+
</button>
1325
<br />
14-
<button class="button fill-button mail" type="button" id="fill-mail-button" [disabled]="!loginForm.valid" (click)="fillMail()">
26+
<button
27+
class="button fill-button mail"
28+
type="button"
29+
id="fill-mail-button"
30+
(click)="fillMail()"
31+
>
1532
Fill Mail
1633
</button>
1734
<button
1835
class="button fill-button password"
1936
type="button"
2037
id="fill-password-button"
21-
[disabled]="!loginForm.valid"
2238
(click)="fillPassword()"
2339
>
2440
Fill Password
2541
</button>
2642
<br />
2743
<br />
2844
<br />
29-
<button class="button delete" type="button" id="delete-button" (click)="deleteValue()">DELETE</button>
45+
<button
46+
class="button delete"
47+
type="button"
48+
id="delete-button"
49+
(click)="deleteValue()"
50+
>
51+
DELETE
52+
</button>
3053
</form>
54+
<p class="alert alert-danger" *ngIf="meta.submitted && emailInvalid">
55+
MAIL FORM: INVALID
56+
</p>
57+
<p
58+
class="alert alert-danger"
59+
*ngIf="meta.submitted && emailPatternInvalid"
60+
>
61+
MAIL FORM PATTERN: INVALID
62+
</p>
63+
<p class="alert alert-danger" *ngIf="meta.submitted && passwordInvalid">
64+
PASSWORD FORM: INVALID
65+
</p>
66+
<p>Form Status: {{ loginForm.status }}</p>
3167
</div>
3268

3369
<ul class="bg-bubbles">

‎src/app/reactive/reactive.component.ts‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
3+
import { Validators } from '@angular/forms';
34

45
@Component({
56
selector: 'app-reactive',
@@ -9,10 +10,34 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
910
export class ReactiveComponent implements OnInit {
1011
constructor(private builder: FormBuilder) {}
1112

13+
get formStatus() {
14+
return this.loginForm.status === 'VALID' ? true : false;
15+
}
16+
get passwordInvalid() {
17+
return this.loginForm.controls.password.errors?.required
18+
? true
19+
: false ?? false;
20+
}
21+
get emailInvalid() {
22+
return this.loginForm.controls.mail.errors?.required
23+
? true
24+
: false ?? false;
25+
}
26+
get emailPatternInvalid() {
27+
return this.loginForm.controls.mail.errors?.email
28+
? true
29+
: false ?? false;
30+
}
31+
32+
// controls form
33+
public meta = {
34+
submitted: false as boolean,
35+
};
36+
1237
// Using FormBuilder to link and initialize form values
1338
public loginForm = this.builder.group({
14-
mail: [''],
15-
password: [''],
39+
mail: ['', Validators.email], // validates whether email format or not
40+
password: ['', Validators.required], // validates form filled or not
1641
});
1742

1843
/**
@@ -27,8 +52,12 @@ export class ReactiveComponent implements OnInit {
2752
* Submit form values
2853
*/
2954
submit() {
30-
console.log('submit');
31-
window.alert(JSON.stringify(this.loginForm.value));
55+
this.meta.submitted = true;
56+
console.log(this.loginForm);
57+
console.log(this.loginForm.status);
58+
if (this.formStatus) {
59+
window.alert(JSON.stringify(this.loginForm.value));
60+
}
3261
}
3362

3463
/**
@@ -61,7 +90,7 @@ export class ReactiveComponent implements OnInit {
6190
* Delete form values
6291
*/
6392
deleteValue() {
64-
this.loginForm.patchValue({
93+
this.loginForm.setValue({
6594
mail: '',
6695
password: '',
6796
});

‎src/app/template-driven/template-driven.component.html‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,65 @@ <h1>Welcome</h1>
77
<!-- ① using ngForm to link form with component -->
88
<form class="form" #form="ngForm" (ngSubmit)="submit()">
99
<!-- ② using ngModel to link value with component model -->
10-
<input type="email" placeholder="mail" [(ngModel)]="model.mail" name="mail" #mail="ngModel" />
11-
<input type="password" placeholder="password" [(ngModel)]="model.password" name="password" #password="ngModel" />
12-
<button class="button" type="submit" id="login-button">Login</button>
10+
<input
11+
type="email"
12+
placeholder="mail"
13+
[(ngModel)]="model.mail"
14+
name="mail"
15+
#mail="ngModel"
16+
required
17+
email
18+
/>
19+
<input
20+
type="password"
21+
placeholder="password"
22+
[(ngModel)]="model.password"
23+
name="password"
24+
#password="ngModel"
25+
required
26+
/>
27+
<button class="button" type="submit" id="login-button">
28+
Login
29+
</button>
1330
<br />
14-
<button class="button fill-button mail" type="button" id="fill-mail-button" [disabled]="!form.valid" (click)="fillMail()">
31+
<button
32+
class="button fill-button mail"
33+
type="button"
34+
id="fill-mail-button"
35+
(click)="fillMail()"
36+
>
1537
Fill Mail
1638
</button>
1739
<button
1840
class="button fill-button password"
1941
type="button"
2042
id="fill-password-button"
21-
[disabled]="!form.valid"
2243
(click)="fillPassword()"
2344
>
2445
Fill Password
2546
</button>
2647
<br />
2748
<br />
2849
<br />
29-
<button class="button delete" type="button" id="delete-button" (click)="deleteValue()">DELETE</button>
50+
<button
51+
class="button delete"
52+
type="button"
53+
id="delete-button"
54+
(click)="deleteValue()"
55+
>
56+
DELETE
57+
</button>
3058
</form>
59+
<p class="alert alert-danger" *ngIf="emailInvalid">
60+
MAIL FORM: INVALID
61+
</p>
62+
<p class="alert alert-danger" *ngIf="emailPatternInvalid">
63+
MAIL FORM PATTERN: INVALID
64+
</p>
65+
<p class="alert alert-danger" *ngIf="passwordInvalid">
66+
PASSWORD FORM: INVALID
67+
</p>
68+
<p>Form Status: {{ form.status }}</p>
3169
</div>
3270

3371
<ul class="bg-bubbles">

‎src/app/template-driven/template-driven.component.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,33 @@ import { FormBuilder, NgForm } from '@angular/forms';
88
})
99
export class TemplateDrivenComponent implements OnInit {
1010
constructor() {}
11+
12+
get formStatus() {
13+
return this.form?.status === 'VALID' ? true : false;
14+
}
15+
get passwordInvalid() {
16+
return this.form?.form?.controls?.password?.errors?.required
17+
? true
18+
: false ?? false;
19+
}
20+
get emailInvalid() {
21+
return this.form?.form?.controls?.mail?.errors?.required
22+
? true
23+
: false ?? false;
24+
}
25+
get emailPatternInvalid() {
26+
return this.form?.form?.controls?.mail?.errors?.email
27+
? true
28+
: false ?? false;
29+
}
30+
1131
public model = {
1232
mail: '',
1333
password: '',
1434
};
1535

36+
// https://angular.io/guide/form-validation
37+
1638
@ViewChild('form')
1739
form: NgForm;
1840

@@ -22,7 +44,6 @@ export class TemplateDrivenComponent implements OnInit {
2244
* Submit form values
2345
*/
2446
submit() {
25-
console.log('submit');
2647
window.alert(JSON.stringify(this.form.value));
2748
}
2849

0 commit comments

Comments
 (0)