<form [formGroup]="myForm">
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
        <label for="entityNameTag">Entity Name</label>
        <input type="text" class="uk-input uk-width-medium" formControlName="name" id="entityNameTag" placeholder="Entity Name">
    </div>
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.pid.valid && myForm.controls.pid.dirty}">
        <label for="entityPidTag">Entity persistent id for portal</label>
        <input type="text" class="uk-input uk-width-medium" formControlName="pid" id="entityPidTag" placeholder="Entity Pid">
    </div>

<!--
    <div ngModelGroup="phoneNumbers">
      <h3>Phone numbers</h3>
      <div *ngFor="let phoneId of phoneNumberIds; let i=index;">
        <label>Phone number {{i + 1}}</label>
        <input type="text" name="phoneNumber[{{phoneId}}]" #phoneNumber="ngModel" ngModel/>
        <button type="button" (click)="remove(i); myForm.control.markAsTouched()">remove</button>
      </div>
      <button type="button" (click)="add(); myForm.control.markAsTouched()">Add phone number</button>
    </div>
-->

<!-- <div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.entities.dirty}">
  <div *ngFor="let entity of entities; let i=index;">
    <label>Entity {{i + 1}}</label>
    <input type="text" name="entities[{{entity}}]" class="form-control" formControlName="entity"/>
  </div>
</div> -->


    <input type="hidden" formControlName="_id">
</form>
<!--<pre>-->
<!--{{myForm.value | json}}-->
<!--</pre>-->
