D-Net

    <!--div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.entities.dirty}"-->

        <!--label for="pageEntitiesTag">Entities</label>

        <span type="text" class="form-array" formArrayName="entities" id="pageEntitiesTag" placeholder="Entities">

          <input *ngFor="let entity of myForm.value.entities" type="text" class="form-control">

        </span-->

        <!--select>

            <option [value]="">--add entities--</option>

            <option *ngFor="let entity of myForm.value.entities" [value]="entity._id">{{entity.name}}</option>

        </select-->

            <!--button type="button" (click)="isCollapsed = !isCollapsed">Toggle collapse</button>

            <div [collapse]="isCollapsed" class="card card-block card-header">

              <div class="well well-lg">

                <div *ngFor="let entity of myForm.value.entities" class="row user form-control" formControlName="entities" id="pageEntitiesTag" >

                  <button value="{{entity._id}}" type="button">ADD</button>{{entity.name}}

                </div>

              </div>

            </div-->

            <!--span class="col-sm-1 avatar">

              <input id="{{entity._id}}" class="checkBox" type="checkbox" name="" value="{{entity._id}}">

            </span-->

            <!--div formArrayName="entities">

                  <div *ngFor="let entity of entities.controls; let i=index" [formGroupName]="i" >

                      <div class="form-group">

                        <label class="center-block">Name:</label>

                          <input class="form-control" formControlName="name"

                        <span><button class="col-sm-2" value="{{entity.value._id}}" type="button">ADD</button><label class="form-control col-sm-10">{{entity.value.name}}</label></span>

                      </div>

                    <br>

                  </div>

                  <button (click)="addEntity()" type="button">Add an Entity</button>

                </div-->

                <!-- <div formArrayName="entities">

                  <div *ngFor="let entity of entities.controls; let i=index" [formGroupName]="i" >

                    <div class="form-group">

                      <label class="center-block">Name:</label>

                      <span><button class="col-sm-2" value="{{entity.value._id}}" type="button">ADD</button><label class="form-control col-sm-10">{{entity.value.name}}</label></span>

                    </div>

                  </div>

                </div> -->

                <div formArrayName="entities" class="form-group">

                    <label for="entityNameTag">Entity Name</label>

                    <div id="entityNameTag">

                      <!-- <label class="form-control">

                        <span *ngFor="let entity of entities.controls; let i=index">{{entity.value.name}}<span *ngIf="i<(entities.controls.length-1)">, </span></span>

                      </label> -->

                      <pre class="card card-block card-header"><span *ngFor="let entity of myForm.value.entities; let i=index">{{entity.name}}<span *ngIf="i<(myForm.value.entities.length-1)">, </span></span></pre>

                      <button type="button" (click)="toggle()">Add / Remove entities</button>

                      <div [collapse]="myForm.value.isCollapsed" *ngFor="let entity of getKeys(allEntities)">

                        <span><!--button type="button">ADD</button-->

                          <span *ngIf="allEntities.get(entity)" class="activated" >

                              <input (click)="toggleEntity(false,[entity._id], entity)" class="deactivate" src="imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">

                          </span>

                          <span *ngIf="!allEntities.get(entity)" class="deactivated" >

                              <input (click)="toggleEntity(true,[entity._id], entity)" class="deactivate" src="imgs/add-icon.png" title="Enable" width="20" type="image" height="20">

                          </span>

                          {{entity.name}}

                        </span>

                      </div>

                    </div>

                </div>

                <!-- <p>myForm value: {{ myForm.value | json}}</p> -->

    <!--/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 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> -->

<!--<pre>-->

<!--{{myForm.value | json}}-->

<!--</pre>-->