diff --git a/src/app/address/address.component.html b/src/app/address/address.component.html
new file mode 100644
index 0000000..77fc1b9
--- /dev/null
+++ b/src/app/address/address.component.html
@@ -0,0 +1,15 @@
+<fieldset [formGroupName]="groupName">
+  <legend>{{ legend }}</legend>
+  <label>
+    Nombre y Número de la Calle
+    <input type="text" formControlName="line1" />
+  </label>
+  <label>
+    Localidad
+    <input type="text" formControlName="city" />
+  </label>
+  <label>
+    Código Postal
+    <input type="text" formControlName="zipCode" />
+  </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.spec.ts b/src/app/address/address.component.spec.ts
new file mode 100644
index 0000000..871e9f2
--- /dev/null
+++ b/src/app/address/address.component.spec.ts
@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import {
+  AddressComponent,
+  generateAddressFormGroup,
+} from './address.component';
+
+/*
+    Si solo necesitamos testear la lógica de la clase
+*/
+describe('AddressComponent Class Testing', () => {
+  let component: AddressComponent;
+
+  beforeEach(() => {
+    component = new AddressComponent();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+/*
+  Si necesitamos testear algo del template
+*/
+@Component({
+  template: `<form [formGroup]="form">
+    <ako-address groupName="testAddress" legend="direccion"></ako-address>
+  </form>`,
+})
+class WrapperComponent {
+  form = new FormGroup({
+    testAddress: generateAddressFormGroup(),
+  });
+}
+describe('AddressComponent Template Testing', () => {
+  let fixture: ComponentFixture<WrapperComponent>;
+  let component: AddressComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WrapperComponent, AddressComponent],
+      imports: [ReactiveFormsModule],
+      //   providers: [{ provide: ControlContainer, useValue: fgd }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WrapperComponent);
+    fixture.detectChanges();
+    component = fixture.debugElement.query(
+      By.directive(AddressComponent)
+    ).componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/address/address.component.ts b/src/app/address/address.component.ts
new file mode 100644
index 0000000..be28087
--- /dev/null
+++ b/src/app/address/address.component.ts
@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnInit,
+} from '@angular/core';
+import {
+  ControlContainer,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+
+export function generateAddressFormGroup(): FormGroup {
+  return new FormGroup({
+    line1: new FormControl('', Validators.required),
+    city: new FormControl(''),
+    zipCode: new FormControl(''),
+  });
+}
+
+@Component({
+  selector: 'ako-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      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..acde013 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 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],
-  imports: [BrowserModule, FormsModule],
+  declarations: [AppComponent, CheckoutComponent, AddressComponent],
+  imports: [BrowserModule, ReactiveFormsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/checkout/checkout.component.html b/src/app/checkout/checkout.component.html
index 116d14b..57cc861 100644
--- a/src/app/checkout/checkout.component.html
+++ b/src/app/checkout/checkout.component.html
@@ -1,51 +1,29 @@
-<form #f="ngForm">
+<form [formGroup]="form">
   <label>
     Nombre y Apellidos
-    <input type="text" name="fullname" ngModel />
+    <input type="text" formControlName="fullName" />
   </label>
   <label>
     Correo Electrónico
-    <input type="email" name="email" ngModel />
+    <input type="email" formControlName="email" />
   </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>
 
 <pre>
-<strong>Template-Driven</strong>
+<strong>Reactive</strong>
 
-<strong>NgForm.value:</strong>
-{{ f.value | json }}
+<strong>FormGroup.value:</strong>
+{{ form.value | json }}
 
-<strong>Status:</strong> {{ f.status }}
+<strong>Status:</strong> {{ form.status }}
 </pre>
diff --git a/src/app/checkout/checkout.component.ts b/src/app/checkout/checkout.component.ts
index 46596ff..e8cc81d 100644
--- a/src/app/checkout/checkout.component.ts
+++ b/src/app/checkout/checkout.component.ts
@@ -1,16 +1,21 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { generateAddressFormGroup } from '../address/address.component';
 
 @Component({
   selector: 'ako-checkout',
   templateUrl: './checkout.component.html',
   styleUrls: ['./checkout.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckoutComponent implements OnInit {
+  form = this.fb.group({
+    fullName: '',
+    email: '',
+    deliveryAddress: generateAddressFormGroup(),
+    billingAddress: generateAddressFormGroup(),
+  });
+  constructor(private fb: FormBuilder) {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }