@ng2-dynamic-forms/ui-foundation/src/dynamic-form-foundation-sites.component.html

Foundation UI package for ng2 Dynamic Forms

<div [formGroup]="group" [ngClass]="[model.cls.element.container, model.cls.grid.container]">

    <div *ngIf="type !== 2 && model.label !== null"
         [ngClass]="model.cls.grid.label">

        <label [attr.for]="model.id"
               [class.is-invalid-label]="hasErrorMessaging && !hasFocus && isInvalid"
               [innerHTML]="model.label"
               [ngClass]="model.cls.element.label"></label>
    </div>


    <ng-template *ngIf="type !== 1 && template?.align === 'START'"
                 [ngTemplateOutlet]="template.templateRef"
                 [ngTemplateOutletContext]="model"></ng-template>


    <div [ngClass]="model.cls.grid.control">

        <ng-container [ngSwitch]="type">

            <div *ngSwitchCase="1"
                 [dynamicId]="bindId && model.id"
                 [formArrayName]="model.id"
                 [ngClass]="model.cls.element.control">

                <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
                     [formGroupName]="idx" [ngClass]="[model.cls.element.group, model.cls.grid.group]">

                    <dynamic-form-foundation-sites-control *ngFor="let item of groupModel.group"
                                                           [bindId]="false"
                                                           [context]="groupModel"
                                                           [group]="control.at(idx)"
                                                           [hasErrorMessaging]="item.hasErrorMessages"
                                                           [model]="item"
                                                           [nestedTemplates]="templates"
                                                           [ngClass]="[item.cls.element.host, item.cls.grid.host]"
                                                           (blur)="onFocusChange($event)"
                                                           (change)="onValueChange($event)"
                                                           (focus)="onFocusChange($event)"></dynamic-form-foundation-sites-control>

                    <ng-container *ngTemplateOutlet="template?.templateRef; context: groupModel"></ng-container>

                </div>

            </div>


            <label *ngSwitchCase="2">

                <input type="checkbox"
                       [attr.tabindex]="model.tabIndex"
                       [checked]="model.checked"
                       [dynamicId]="bindId && model.id"
                       [formControlName]="model.id"
                       [name]="model.name"
                       [ngClass]="model.cls.element.control"
                       [required]="model.required"
                       [value]="model.value"
                       (blur)="onFocusChange($event)"
                       (change)="onValueChange($event)"
                       (focus)="onFocusChange($event)"/><span
                    [ngClass]="[model.cls.element.label, model.cls.grid.label]"
                    [innerHTML]="model.label"></span></label>


            <fieldset *ngSwitchCase="3"
                      [dynamicId]="bindId && model.id"
                      [formGroupName]="model.id"
                      [name]="model.name"
                      [ngClass]="model.cls.element.control">

                <legend *ngIf="model.legend">{{model.legend}}</legend>

                <dynamic-form-foundation-sites-control *ngFor="let itemModel of model.group"
                                                       [group]="control"
                                                       [hasErrorMessaging]="itemModel.hasErrorMessages"
                                                       [model]="itemModel"
                                                       [nestedTemplates]="templates"
                                                       [ngClass]="[itemModel.cls.element.host, itemModel.cls.grid.host]"
                                                       (blur)="onFocusChange($event)"
                                                       (change)="onValueChange($event)"
                                                       (focus)="onFocusChange($event)"></dynamic-form-foundation-sites-control>
            </fieldset>


            <div *ngSwitchCase="4" class="input-group">

                <span *ngIf="model.prefix" class="input-group-label" [innerHTML]="model.prefix"></span>

                <input class="input-group-field"
                       [attr.accept]="model.accept"
                       [attr.autoComplete]="model.autoComplete"
                       [attr.list]="model.listId"
                       [attr.max]="model.max"
                       [attr.min]="model.min"
                       [attr.multiple]="model.multiple"
                       [attr.step]="model.step"
                       [attr.tabindex]="model.tabIndex"
                       [autofocus]="model.autoFocus"
                       [class.is-invalid-input]="hasErrorMessaging && !hasFocus && isInvalid"
                       [dynamicId]="bindId && model.id"
                       [formControlName]="model.id"
                       [maxlength]="model.maxLength"
                       [minlength]="model.minLength"
                       [name]="model.name"
                       [ngClass]="model.cls.element.control"
                       [pattern]="model.pattern"
                       [placeholder]="model.placeholder"
                       [readonly]="model.readOnly"
                       [required]="model.required"
                       [spellcheck]="model.spellCheck"
                       [textMask]="{mask: (model.mask || false), showMask: model.mask && !(model.placeholder)}"
                       [type]="model.inputType"
                       (blur)="onFocusChange($event)"
                       (change)="onValueChange($event)"
                       (focus)="onFocusChange($event)"/>

                <span *ngIf="model.suffix" class="input-group-label" [innerHTML]="model.suffix"></span>

                <datalist *ngIf="model.list" [id]="model.listId">

                    <option *ngFor="let option of model.list" [value]="option">

                </datalist>

            </div>


            <fieldset *ngSwitchCase="5" role="radiogroup"
                      [attr.tabindex]="model.tabIndex"
                      [dynamicId]="bindId && model.id"
                      [name]="model.name"
                      (change)="onValueChange($event)">

                <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>

                <label *ngFor="let option of model.options$ | async">

                    <input type="radio"
                           [formControlName]="model.id"
                           [name]="model.name"
                           [ngClass]="model.cls.element.control"
                           [value]="option.value"
                           (blur)="onFocusChange($event)"
                           (focus)="onFocusChange($event)"/><span [innerHTML]="option.label"></span></label>

            </fieldset>


            <select *ngSwitchCase="6"
                    [attr.tabindex]="model.tabIndex"
                    [dynamicId]="bindId && model.id"
                    [formControlName]="model.id"
                    [name]="model.name"
                    [ngClass]="model.cls.element.control"
                    [required]="model.required"
                    (blur)="onFocusChange($event)"
                    (change)="onValueChange($event)"
                    (focus)="onFocusChange($event)">

                <option *ngFor="let option of model.options$ | async"
                        [attr.name]="model.name"
                        [ngValue]="option.value">{{option.label}}
                </option>

            </select>


            <div *ngSwitchCase="7" class="switch" [ngClass]="model.cls.element.control">

                <input type="checkbox" class="switch-input"
                       [attr.tabindex]="model.tabIndex"
                       [checked]="model.checked"
                       [dynamicId]="bindId && model.id"
                       [formControlName]="model.id"
                       [name]="model.name"
                       [required]="model.required"
                       [value]="model.value"
                       (blur)="onFocusChange($event)"
                       (change)="onValueChange($event)"
                       (focus)="onFocusChange($event)"/>

                <label class="switch-paddle" [attr.for]="model.id">

                    <span class="switch-active" aria-hidden="true">{{model.onLabel}}</span>
                    <span class="switch-inactive" aria-hidden="true">{{model.offLabel}}</span>

                </label>

            </div>


            <textarea *ngSwitchCase="8"
                      [attr.tabindex]="model.tabIndex"
                      [class.is-invalid-input]="hasErrorMessaging && !hasFocus && isInvalid"
                      [cols]="model.cols"
                      [dynamicId]="bindId && model.id"
                      [formControlName]="model.id"
                      [maxlength]="model.maxLength"
                      [minlength]="model.minLength"
                      [name]="model.name"
                      [ngClass]="model.cls.element.control"
                      [placeholder]="model.placeholder"
                      [readonly]="model.readOnly"
                      [required]="model.required"
                      [rows]="model.rows"
                      [spellcheck]="model.spellCheck"
                      [wrap]="model.wrap"
                      (blur)="onFocusChange($event)"
                      (change)="onValueChange($event)"
                      (focus)="onFocusChange($event)"></textarea>

        </ng-container>

        <p *ngIf="hasHint" class="help-text" [ngClass]="model.cls.element.hint" [innerHTML]="model.hint"></p>

    </div>

    <ul *ngIf="hasErrorMessaging" [ngClass]="[model.cls.element.errors, model.cls.grid.errors]">

        <li *ngFor="let message of errorMessages" class="form-error"
            [class.is-visible]="showErrorMessages">{{message}}
        </li>

    </ul>


    <ng-template *ngIf="type !== 1 && template?.align === 'END'"
                 [ngTemplateOutlet]="template.templateRef"
                 [ngTemplateOutletContext]="model"></ng-template>

    <ng-content></ng-content>

</div>