2017-09-22 12:26:08 +02:00
< form [ formGroup ] = " myForm " >
< div class = "form-group" [ ngClass ] = " { ' has-error ' : ! myForm . controls . name . valid & & myForm . controls . route . dirty } " >
< label for = "pageRouteTag" > Page Route< / label >
< input type = "text" class = "form-control" formControlName = "route" id = "pageRouteTag" placeholder = "Page Route" >
< / div >
< div class = "form-group" [ ngClass ] = " { ' has-error ' : ! myForm . controls . name . valid & & myForm . controls . name . dirty } " >
< label for = "pageNameTag" > Page Name< / label >
< input type = "text" class = "form-control" formControlName = "name" id = "pageNameTag" placeholder = "Page Name" >
< / div >
2017-12-13 12:15:19 +01:00
<!-- 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 >
-->
<!-- <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 > -->
2017-09-22 12:26:08 +02:00
< input type = "hidden" formControlName = "_id" >
< / form >
2017-12-13 12:15:19 +01:00
2017-09-22 12:26:08 +02:00
<!-- <pre> -->
<!-- {{myForm.value | json}} -->
2017-12-13 12:15:19 +01:00
<!-- </pre> -->