Как создать Angular 2 Custom Component с несколькими полями ввода

Я создал простой пользовательский компонент в Angular 2, реализовав интерфейс CustomValueAccessor и он отлично работает. Этот компонент имеет только 1 поле ввода в нем. например, компонент почтового индекса

 <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>

Теперь я хочу расширить этот пример и создать компонент адреса, который имеет несколько полей ввода, line1, line 2, line3, postcode и country.

Я расширил пример почтового индекса, чтобы включить несколько полей, и я вижу, как компонент ввода появляется на экране. Однако значения компонент адреса не отражаются в форме хоста.

Оцените любой указатель в этом направлении.

Пример:

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup, ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CommonAddressComponent,
      multi: true
    }
  ]
})

export class CommonAddressComponent implements OnInit , ControlValueAccessor {
  addressForm :  FormGroup

  ngOnInit() {
    this.addressForm = this.formBuilder.group({
      line_1: '',
      line_2: '',

    });
  }

  /*private addressForm = new FormControl()*/

  private subscription: Subscription;
  public disabled: any = false;

  constructor(private formBuilder: FormBuilder) { }

  //model to view
  writeValue(value: any) {
    console.log("value = " + value)
    this.addressForm.setValue(value); 
  }

  registerOnChange(fn: (value: any) => void) {
    console.log("registerOnChange = " + fn)

    this.addressForm.valueChanges.subscribe(fn);
  }

  registerOnTouched() {}


}

Файл шаблона:

<div class="form-group" [formGroup]="addressForm">
  <input class="form-control" type="text" formControlName="line_1" />
  <input  class="form-control" type="text" formControlName="line_2" />
</div>

Файл компонента формы хоста:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder} from '@angular/forms';


@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss']
})
export class ContactsComponent implements OnInit {

  contactsForm: FormGroup;

  constructor(private fb: FormBuilder) {
     this.createForm();
   }

   createForm() {
    this.contactsForm = this.fb.group({
      name: 'test', // <--- the FormControl called "name"
      postcode: 'tester111', // <--- the FormControl called "name"
      line_3: '111', // <--- the FormControl called "name"*/
      addressForm: new FormGroup({
              line_1: new FormControl('I am line 1', Validators.minLength(2)),
              line_2: new FormControl('I am line 2')

            }),
    });
  }

  ngOnInit() {
  }

}

Файл шаблона формы хоста:

<form [formGroup]="contactsForm">

  <p>Form value: {{ contactsForm.value | json }}</p>
  <p>Form status: {{ contactsForm.status | json }}</p>


   <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>

    <div>
      <postcode label="Post Code" cssClass="form-control" formControlName="postcode"> </postcode>
    </div>

    <div class="form-group">
    <address-line  cssClass="form-control" name="line3" label="line 3" elementName="line3" 
      elementID="line3" formControlName="line_3"> </address-line>
    </div>

     <!--<div [formGroup]="contactsForm.addressForm"> -->
    <div >
      <address formGroupName="addressForm"> </address>
    </div>

  </form>