développement du composant Login

src/app/components/login/login.component.html

@@ -5,19 +5,19 @@
         <div>
             <mat-form-field class="full-width">
                 <mat-label>Login</mat-label>
-                <input matInput type="text" formControlName="login" />
+                <input matInput type="text" formControlName="login" (input)="onInputChange($event)"/>
             </mat-form-field>
         </div>
         
         <div>
             <mat-form-field class="full-width">
                 <mat-label>Password</mat-label>
-                <input matInput type="text" formControlName="password" />
+                <input matInput type="text" formControlName="password" (input)="onInputChange($event)"/>
             </mat-form-field>
         </div>
         
         <div>
-            <button mat-flat-button color="primary" type="button" (click)="Connect()">Connexion</button>
+            <button [disabled]="!this.isButtonVisible" mat-flat-button color="primary" type="button" (click)="connect()" >Connexion</button>
         </div>
     </form>
     

src/app/components/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 
@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { User } from '../../models/user.model';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -21,30 +22,53 @@ import { User } from '../../models/user.model';
     MatDatepickerModule,
     MatNativeDateModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgIf
   ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css'
 })
+
 export class LoginComponent {
+  @Output() addConnectEvent = new EventEmitter<User>();
+  
+  public isButtonVisible = false;
+
   user: User = { login: '', password: '' }
   loginForm: FormGroup = new FormGroup({
     login: new FormControl(this.user.login, Validators.required),
     password: new FormControl(this.user.password, Validators.required),
   });
 
-  Connect() {  
+  connect() {  
-    // if (this.loginForm.invalid) {
+    console.log(this.loginForm.value.login)
-    //   console.log("ERREUR");
+    console.log(this.loginForm.value.password)
-    //   return;
-    // }
-    console.log(this.user.login)
-    console.log(this.user.password)
 
-    if(this.user.login != this.user.password){
+    if (this.loginForm.invalid) {
-      console.log("ERREUR");
+      console.log("ERREUR INVALIDE");
       return;
     }
+
+    if(this.loginForm.value.login != this.loginForm.value.password){
+      console.log("ERREUR DIFFERENT");
+      return;
+    }
+
+    this.user = this.loginForm.value;
+
+    this.addConnectEvent.emit(this.user);
+    this.loginForm.reset();
+    this.isButtonVisible = false;
+
+  }
+
+  onInputChange(event: Event) {
+    if(this.loginForm.value.login != "" && this.loginForm.value.password != ""){
+      this.isButtonVisible = true;
+    } else{
+      this.isButtonVisible = false;
+    }
   }
 
+
 }