D-Net

<div *ngIf="errorMessage" class="uk-alert-danger" uk-alert>{{errorMessage}}</div>

<form [formGroup]="myForm">

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

        <label for="pageTag">Select Page</label>

        <select formControlName="page" id="pageTag" class="form-control">

            <option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>

        </select>

    </div>

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

        <label for="placementTag">Select Placement</label>

        <select formControlName="placement" id="placementTag" class="form-control">

            <option [value]="'top'">Top</option>

            <option [value]="'left'">Left</option>

            <option [value]="'right'">Right</option>

            <option [value]="'bottom'">Bottom</option>

        </select>

    </div>

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

        <label>Content</label>

        <div>

            <ckeditor

                    [readonly]="false"

                    debounce="500"

                    formControlName="content"

                    [config]="{allowedContent: true,extraAllowedContent : '*(*)'}">

                <!--id="contentTag"-->

                <!--(ready)="onReady($event)"-->

                <!--(focus)="onFocus($event)"-->

                <!--[config]="{uiColor: '#99000'}"-->

                <!--(blur)="onBlur($event)"-->

                <!--(change)="onChange($event)"-->

            </ckeditor>

        </div>

        <!--<textarea class="form-control" formControlName="content" id="contentTag" placeholder="Content" rows="3"></textarea>-->

    </div>

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

        <label for="orderTag">Order</label>

        <input type="text" step="1" class="form-control" formControlName="order" id="orderTag" placeholder="Order (e.g. 2)">

    </div>

    <div class="form-group">

        <label>Select Status</label>

        <label class="checkbox">

            <span style="font-weight: normal;">Active</span>

            <input tabindex="0" type="checkbox" formControlName="isActive">

        </label>

    </div>

    <input type="hidden" formControlName="_id">

</form>

<!--<pre>-->

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

    <!--{{myForm.valid}}-->

<!--</pre>-->