Skip to content
This repository was archived by the owner on Nov 28, 2025. It is now read-only.

Commit 22e4675

Browse files
mckenzieartsmckenziearts
committed
🩹 correction du bug sur la gestion du formulaire
1 parent ee46ad0 commit 22e4675

File tree

6 files changed

+79
-53
lines changed

6 files changed

+79
-53
lines changed

‎src/app/modules/authentication/pages/login/login.component.html‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
66
</p>
77
</div>
88

9-
<form (submit)="submit()" class="mt-10 space-y-6">
9+
<form [formGroup]="form" (submit)="submit()" class="mt-10 space-y-6">
1010
<!-- Email Address -->
1111
<div>
1212
<cosna-input-overlaping-label
1313
label="Adresse E-mail"
1414
name="email"
15+
formControlName="email"
1516
></cosna-input-overlaping-label>
1617
</div>
1718

@@ -21,6 +22,7 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
2122
label="Mot de passe"
2223
name="password"
2324
[type]="'password'"
25+
formControlName="password"
2426
></cosna-input-overlaping-label>
2527
</div>
2628

@@ -46,21 +48,3 @@ <h2 class="mt-6 text-3xl font-semibold text-slate-900">Connectez-vous</h2>
4648
</cosna-button-primary>
4749
</div>
4850
</form>
49-
50-
<div class="flex items-center justify-between py-6">
51-
<p class="text-sm leading-5 text-slate-500">Copyright © {{ date }} Cosna Afrique.</p>
52-
<div class="flex items-center space-x-5">
53-
<a href="https://www.facebook.com/CosnaAfrique" target="_blank" class="text-slate-400 hover:text-slate-500">
54-
<span class="sr-only">Facebook</span>
55-
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
56-
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
57-
</svg>
58-
</a>
59-
<a href="https://twitter.com/cosna_afrique" target="_blank" class="text-slate-400 hover:text-slate-500">
60-
<span class="sr-only">Twitter</span>
61-
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
62-
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
63-
</svg>
64-
</a>
65-
</div>
66-
</div>

‎src/app/modules/authentication/pages/login/login.component.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
23

34
@Component({
45
templateUrl: './login.component.html',
56
})
67
export class LoginComponent implements OnInit {
7-
public email!: string;
8-
public password!: string;
8+
public form: FormGroup = this.formBuilder.group({
9+
email: ['', Validators.required],
10+
password: ['', Validators.required],
11+
});
912
public error!: string;
10-
date: number = (new Date()).getFullYear();
1113

12-
constructor() {}
13-
14-
getValue(value: string) {
15-
console.log(value);
16-
}
14+
constructor(private formBuilder: FormBuilder) {}
1715

1816
ngOnInit(): void {}
1917

2018
public submit() {
21-
console.log(this.email, this.password);
19+
console.log(this.form.getRawValue());
2220
}
2321

2422
}

‎src/app/shared/components/inputs/overlaping-label/overlaping-label.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
</label>
88
<input matInput
99
[name]="name"
10+
[id]="name"
1011
[type]="type"
11-
[id]="name"
12-
[(ngModel)]="value"
13-
placeholder="{{ placeholder }}"
12+
[value]="value"
13+
(input)="onChange($any($event.target).value)"
14+
(blur)="onTouched()"
15+
[placeholder]="placeholder ? placeholder : ''"
1416
[ngClass]="inputClass"
15-
class="block w-full p-0 border-0 outline-none placeholder-slate-500 focus:ring-0 sm:text-sm"
17+
class="block w-full p-0 border-0 outline-none placeholder-slate-500 text-slate-700 focus:ring-0 sm:text-sm"
1618
/>
1719
</div>
1820
<ng-template [ngIf]="helpText">

‎src/app/shared/components/inputs/overlaping-label/overlaping-label.component.ts‎

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,63 @@
1-
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
1+
import { Component, forwardRef, OnInit, Input } from '@angular/core';
2+
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
23

34
@Component({
45
selector: 'cosna-input-overlaping-label',
56
templateUrl: './overlaping-label.component.html',
6-
styleUrls: ['./overlaping-label.component.scss']
7+
styleUrls: ['./overlaping-label.component.scss'],
8+
providers: [
9+
{
10+
provide: NG_VALUE_ACCESSOR,
11+
useExisting: forwardRef(() => OverlapingLabelComponent),
12+
multi: true
13+
}
14+
]
715
})
8-
export class OverlapingLabelComponent implements OnInit {
16+
export class OverlapingLabelComponent implements OnInit, ControlValueAccessor {
917

10-
@Input()
1118
value: string = '';
1219

13-
@Input()
14-
label: string|null = '';
20+
@Input() label!: string | null;
1521

16-
@Input()
17-
placeholder: string|null = '';
22+
@Input() placeholder!: string | null;
1823

19-
@Input()
20-
name: string = '';
24+
@Input() name!: string;
2125

22-
@Input()
23-
type: string = 'text';
26+
@Input() type: string = 'text';
2427

25-
@Input()
26-
required: boolean = false;
28+
@Input() required: boolean = false;
2729

28-
@Input()
29-
containerClass = '';
30+
@Input() disabled!: boolean;
3031

31-
@Input()
32-
inputClass = '';
32+
@Input() containerClass!: string;
3333

34-
@Input()
35-
helpText: string|null = null;
34+
@Input() inputClass!: string;
3635

37-
ngOnInit(): void {
36+
@Input() helpText!: string | null;
37+
38+
ngOnInit(): void { }
39+
40+
writeValue(value: string): void {
41+
if (value !== undefined) {
42+
this.value = value;
43+
this.onChange(value);
44+
}
45+
}
46+
47+
setDisabledState(isDisabled: boolean): void {
48+
this.disabled = isDisabled;
49+
}
50+
51+
registerOnChange(fn: (value: string) => void): void {
52+
this.onChange = fn;
53+
}
54+
55+
registerOnTouched(fn: () => void): void {
56+
this.onTouched = fn;
3857
}
3958

59+
onChange = (value: string) => {};
60+
61+
onTouched = () => {};
62+
4063
}

‎src/app/shared/themes/layouts/auth/auth.component.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@
22
<div class="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
33
<div class="w-full max-w-sm mx-auto lg:w-96">
44
<router-outlet></router-outlet>
5+
6+
<div class="flex items-center justify-between py-6">
7+
<p class="text-sm leading-5 text-slate-500">Copyright © {{ date }} Cosna Afrique.</p>
8+
<div class="flex items-center space-x-5">
9+
<a href="https://www.facebook.com/CosnaAfrique" target="_blank" class="text-slate-400 hover:text-slate-500">
10+
<span class="sr-only">Facebook</span>
11+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
12+
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
13+
</svg>
14+
</a>
15+
<a href="https://twitter.com/cosna_afrique" target="_blank" class="text-slate-400 hover:text-slate-500">
16+
<span class="sr-only">Twitter</span>
17+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
18+
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
19+
</svg>
20+
</a>
21+
</div>
22+
</div>
523
</div>
624
</div>
725

‎src/app/shared/themes/layouts/auth/auth.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core';
55
templateUrl: './auth.component.html',
66
})
77
export class AuthComponent implements OnInit {
8+
date: number = (new Date()).getFullYear();
89

910
constructor() { }
1011

0 commit comments

Comments
 (0)