<button type="button" (click)="onAdd()">Add</button>
  <hr>

  <form [formGroup]="addressForm">
    <div formArrayName="addresses"
         *ngFor="let address of addressForm.get('addresses').controls; let i = index;">
      <div [formGroupName]="i">
         <input formControlName="address1" placeholder="Address 1">
         <input formControlName="address2" placeholder="Address 2">
         <input formControlName="city" placeholder="City">
         <input formControlName="state" placeholder="State">
         <input formControlName="zip" placeholder="Zip">
         <button (click)="onDelete(i)">Delete</button>
      </div>
      <hr>
    </div>
  </form>

constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const addressForms = this.data.map(address => this.createAddressForm(address));

    this.addressForm = this.fb.group({
      addresses: this.fb.array(addressForms)
    });
  }

  createAddressForm(address?: any) {
    return this.fb.group({
      address1: address ? address.address1 : '',
      address2: address ? address.address2 : '',
      city: address ? address.city : '',
      state: address ? address.state : '',
      zip: address ? address.zip : ''
    });
  }

  onAdd() {
    const addresses = this.addressForm.get('addresses') as FormArray;
    addresses.push(this.createAddressForm());
  }

  onDelete(index: number) {
    const addresses = this.addressForm.get('addresses') as FormArray;
    addresses.removeAt(index);
  }