From 5a59ea78095a1a76af19ad0baf1e013645074095 Mon Sep 17 00:00:00 2001
From: ako-tech <akotech20@gmail.com>
Date: Wed, 19 Oct 2022 11:53:41 +0200
Subject: [PATCH] refactored to addressComponent

---
 src/app/address/address.component.html   | 15 ++++++++++
 src/app/address/address.component.scss   |  0
 src/app/address/address.component.ts     | 31 +++++++++++++++++++
 src/app/app.module.ts                    |  3 +-
 src/app/checkout/checkout.component.html | 38 +++++-------------------
 5 files changed, 56 insertions(+), 31 deletions(-)
 create mode 100644 src/app/address/address.component.html
 create mode 100644 src/app/address/address.component.scss
 create mode 100644 src/app/address/address.component.ts

diff --git a/src/app/address/address.component.html b/src/app/address/address.component.html
new file mode 100644
index 0000000..d553a87
--- /dev/null
+++ b/src/app/address/address.component.html
@@ -0,0 +1,15 @@
+<fieldset [ngModelGroup]="groupName">
+  <legend>{{ legend }}</legend>
+  <label>
+    Nombre y Número de la Calle
+    <input type="text" name="line1" ngModel />
+  </label>
+  <label>
+    Localidad
+    <input type="text" name="city" ngModel />
+  </label>
+  <label>
+    Código Postal
+    <input type="text" name="zipcode" ngModel />
+  </label>
+</fieldset>
diff --git a/src/app/address/address.component.scss b/src/app/address/address.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/address/address.component.ts b/src/app/address/address.component.ts
new file mode 100644
index 0000000..5f92c7e
--- /dev/null
+++ b/src/app/address/address.component.ts
@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { ControlContainer, NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'ako-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      // useExisting: NgForm,
+      useFactory: () =>
+        inject(ControlContainer, { skipSelf: true, host: true }),
+    },
+  ],
+})
+export class AddressComponent implements OnInit {
+  @Input() groupName = '';
+  @Input() legend = '';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0530101..a1d26d6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,9 +4,10 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { CheckoutComponent } from './checkout/checkout.component';
+import { AddressComponent } from './address/address.component';
 
 @NgModule({
-  declarations: [AppComponent, CheckoutComponent],
+  declarations: [AppComponent, CheckoutComponent, AddressComponent],
   imports: [BrowserModule, FormsModule],
   bootstrap: [AppComponent],
 })
diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html
index 116d14b..4ff629d 100644
--- a/src/app/checkout/checkout.component.html
+++ b/src/app/checkout/checkout.component.html
@@ -7,36 +7,14 @@
     Correo Electrónico
     <input type="email" name="email" ngModel />
   </label>
-  <fieldset ngModelGroup="deliveryAddress">
-    <legend>Dirección de Entrega</legend>
-    <label>
-      Nombre y Número de la Calle
-      <input type="text" name="line1" ngModel />
-    </label>
-    <label>
-      Localidad
-      <input type="text" name="city" ngModel />
-    </label>
-    <label>
-      Código Postal
-      <input type="text" name="zipcode" ngModel />
-    </label>
-  </fieldset>
-  <fieldset ngModelGroup="billingAddress">
-    <legend>Dirección de Facturación</legend>
-    <label>
-      Nombre y Número de la Calle
-      <input type="text" name="line1" ngModel />
-    </label>
-    <label>
-      Localidad
-      <input type="text" name="city" ngModel />
-    </label>
-    <label>
-      Código Postal
-      <input type="text" name="zipcode" ngModel />
-    </label>
-  </fieldset>
+  <ako-address
+    groupName="deliveryAddress"
+    legend="Dirección de Entrega"
+  ></ako-address>
+  <ako-address
+    groupName="billingAddress"
+    legend="Dirección de Facturación"
+  ></ako-address>
 
   <button type="submit">Siguiente</button>
 </form>