From a20e2275b3ccaff2bedbdfed4cebc8d1da85cf48 Mon Sep 17 00:00:00 2001
From: angieli13 <angiequimica13@gmail.com>
Date: Thu, 20 Apr 2023 12:16:20 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20FormGroup=20y=20se=20adicio?=
 =?UTF-8?q?no=20el=20evento=20onClick=20login?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔍 Accedimos al estado de todo el formulario
🔗 Agregamos el enlace de eventos que escucha el clic del botón y llama al onSave() método del componente cada vez que se produce un clic.
---
 .../src/app/login/login.component.html        | 34 ++++++++++---------
 .../src/app/login/login.component.ts          | 20 +++++++++--
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/burguer-queen/src/app/login/login.component.html b/burguer-queen/src/app/login/login.component.html
index b1f005e1..8d67a1f6 100644
--- a/burguer-queen/src/app/login/login.component.html
+++ b/burguer-queen/src/app/login/login.component.html
@@ -5,33 +5,35 @@
     </div>
 
     <div class="col-md-6 col-lg-6" style="margin-top: 80px;">
-      <form style="background-color: #EA8D6F; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);"
-        class="p-3">
+      <form [formGroup]="formLogin"
+        style="background-color: #EA8D6F; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);" class="p-3">
         <img src="../assets/images/bienvenido.png" alt="Welcome Image" class="img-fluid mx-auto d-block">
         <div class="form-group mt-3">
           <label for="exampleInputEmail1">Email</label>
-          <input type="email" class="form-control" [formControl]="email" id="exampleInputEmail1" aria-describedby="emailHelp"
-            placeholder="Example@example.com" style="width: 100%; margin-left: 5px;">
+          <input type="email" class="form-control" formControlName="email" id="exampleInputEmail1"
+            aria-describedby="emailHelp" placeholder="Example@example.com" style="width: 100%; margin-left: 5px;">
 
           <div class="alert alert-danger mt-3 p-1" [hidden]="email.valid">
-            <span *ngIf="email.errors?.['email']">
-              El email debe ser válido.
-            </span>
-          </div>
+            El email debe ser válido.
           </div>
+        </div>
         <div class="form-group mt-3">
           <label for="exampleInputPassword1">Contraseña</label>
-          <input type="password" class="form-control" [formControl]="password" id="exampleInputPassword1" placeholder="********"
-            style="width: 100%; margin-left: 5px;">
+          <input type="password" class="form-control" formControlName="password" id="exampleInputPassword1"
+            placeholder="********" style="width: 100%; margin-left: 5px;">
 
-          <div class="alert alert-danger mt-3 p-1" [hidden]="password.valid || password.pristine"> El campo debe estar lleno. </div>
+          <div class="alert alert-danger mt-3 p-1"
+            [hidden]="password.valid || password.pristine"> El campo debe estar
+            lleno. </div>
         </div>
-        <button type="submit" class="btn btn-warning mx-auto d-block mt-3"
-          style="background-color: #FDE293;">INICIAR SESIÓN</button>
+        <button type="submit" class="btn btn-warning mx-auto d-block mt-3" [disabled]="formLogin.invalid" style="background-color: #FDE293;" (click)="onClickLogin()">INICIAR
+          SESIÓN</button>
       </form>
     </div>
-    {{ email.value }}
-    {{ email.errors | json }}
+    <!-- {{ email.value }}
+    {{ email.errors | json }} -->
+    <!-- {{ formLogin.value | json }} -->
+    {{ formLogin.get('email')?.value }} <!--método get accedo a los objetos de manera individual -->
+
   </div>
 </div>
-
diff --git a/burguer-queen/src/app/login/login.component.ts b/burguer-queen/src/app/login/login.component.ts
index 4a61f545..10613290 100644
--- a/burguer-queen/src/app/login/login.component.ts
+++ b/burguer-queen/src/app/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
@@ -7,8 +7,22 @@ import { FormControl, Validators } from '@angular/forms';
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent {
+  onClickLogin(){
+    console.log("onClickLogin")
+  }
+
+  get email(){
+    return this.formLogin.get('email') as FormControl;//as formcontrol es para quitar el error y no usar ? en html
+  }
+
+  get password(){
+    return this.formLogin.get('password') as FormControl;
+  }
+formLogin = new FormGroup({
+  'email' : new FormControl('', Validators.email),
+  'password' : new FormControl('',Validators.required)
+})
 
-  email = new FormControl('', Validators.email);
-  password = new FormControl('',Validators.required);
 
 }
+