import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { debug } from 'util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public personContacts: FormGroup;

  private personContactArray : Array<Person> = [];

  constructor(private formBuilder: FormBuilder) {
    this.initPersonArray();
    this.personContacts = this.formBuilder.group({
      persons: this.formBuilder.array([])
    });
  }

  ngOnInit() {
    this.initFormBuilderValues();
  }

  initFormBuilderValues(){
    this.personContactArray.forEach(element => {
        this.addPerson(element);
    });
  }

  initPersonArray(){
    let person1 = new Person(1,"Kuba Woźniak","kubawozniak27@wp.pl","784-973-317");
    let person2 = new Person(2,"Bartek Woźniak","dupa@wp.pl","784-212-121");
    let person3 = new Person(3,"Witkoria Woźniak","bla@wp.pl","784-973-317");

    this.personContactArray.push(person1);
    this.personContactArray.push(person2);
    this.personContactArray.push(person3);
  }

  initPersonContactRows(person?:Person) {
    person = person? person : new Person();
      return this.formBuilder.group({
          PersonContactId: [person.PersonContactId],
          PersonContactName: [person.PersonContactName ,[ Validators.required]],
          PersonContactEmail:[person.PersonContactEmail ,[ Validators.required,]],
          PersonContactPhoneNumber:[person.PersonContactPhoneNumber,[ Validators.required,]]
      });
  }

  addPerson(person? : Person) {
      const control = <FormArray>this.personContacts.controls['persons'];
      control.push(this.initPersonContactRows(person));
  }

  deletePerson(index: number) {
      const control = <FormArray>this.personContacts.controls['persons'];
      debugger;
      control.removeAt(index);
  }
}

export class Person {
  PersonContactId?: number;
  PersonContactName: string;
  PersonContactEmail:string;
  PersonContactPhoneNumber:string;

  constructor(personContactId?:number, personContactName?:string,personContactEmail?:string,personContactPhoneNumber?:string){
    this.PersonContactId = personContactId;
    this.PersonContactEmail = personContactEmail;
    this.PersonContactName = personContactName;
    this.PersonContactPhoneNumber = personContactPhoneNumber;
  }

}

<h3 class="page-header">Add Invoice</h3>

<div class="container">
    <form [formGroup]="personContacts">
        <div formArrayName="persons">
            <div *ngFor="let person of personContacts.controls.persons.controls; let i=index"  [formGroupName]="i">
              <div> #{{ i + 1 }}</div>
                <div class="row">
                    <input type="hidden" formControlName="PersonContactId" name="PersonContactId" >
                    <input formControlName="PersonContactName" name="PersonContactName" class="form-control col-lg-2" placeholder="Imię i nazwisko" required>
                    <input formControlName="PersonContactEmail" name="PersonContactEmail" class="form-control col-lg-2" placeholder="E-mail" required>
                    <input formControlName="PersonContactPhoneNumber" name="PersonContactPhoneNumber" class="form-control col-lg-2" placeholder="Numer telefonu" required>
                    <button type="button" (click)="deletePerson()" class="btn btn-primary">Delete</button><br>
                    <button *ngIf="personContacts.controls.persons.controls.length-1 ==  i"  type="button" (click)="addPerson()" class="btn btn-primary">Add new Row</button><br>
                </div>
                <div class="row">
                    <div *ngIf="person.controls.PersonContactName.dirty">
                        <div *ngIf="person.hasError('required', 'PersonContactName')">Required</div>
                      </div>
                </div>
            </div>
        </div>
    </form>
    <pre>{{personContacts.value | json}}</pre>
</div>