<h2>Your Task ID: {{ id }}</h2>

  <div *ngFor="let key of commandKeys" >
    <span class="ui-float-label">
      <textarea [id]="key" [rows]="1" [cols]="70" pInputTextArea [(ngModel)]="commandPacket[key]"></textarea>
      <label [for]="key">{{ key }}</label>
    </span>
  </div>
  <div>
    <p-button label="Add Field" (click)="addField($event, cpForm)"></p-button>
    <p-button label="Re-Submit" ></p-button>
  </div>

export class CommandPacketDetailsComponent implements OnInit {
  @Input() id: number;

  constructor(private renderSvc: PfServerService) {
  }

  commandPacket: { [key: string]: string; };
  commandKeys: string[];
  message: string = null;

  ngOnInit() {}

  getCommandPacket(id: number) {
    this.renderSvc.getCommandPacket(id).subscribe(data => {
      this.commandPacket = data;
      debugger;
      this.commandKeys = Object.keys(this.commandPacket);
    });
  }

  addField($event, newField) {
    var cpID = this.id;
    var cp = this.commandPacket;

    //cp.push({ key: "value"});
  }
}