This is template that is being displayed before each control
+
+
+
This is template that is being displayed after each control
+
+
+
+
{{ text }}
+
diff --git a/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss
new file mode 100644
index 0000000..8caa870
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss
@@ -0,0 +1,18 @@
+.form-container {
+ max-width: 550px;
+}
+
+.alert-primary {
+ animation: show-animation 500ms;
+ overflow: hidden;
+}
+
+@keyframes show-animation {
+ 0% {
+ transform: scale(0);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
diff --git a/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss.spec.ts b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss.spec.ts
new file mode 100644
index 0000000..73928d5
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.scss.spec.ts
@@ -0,0 +1,22 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleFormNgTemplateComponent } from './simple-form-ng-template.component';
+
+describe('SimpleFormComponent', () => {
+ let fixture: ComponentFixture;
+ let component: SimpleFormNgTemplateComponent;
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ schemas: [NO_ERRORS_SCHEMA],
+ providers: [],
+ declarations: [SimpleFormNgTemplateComponent]
+ });
+
+ fixture = TestBed.createComponent(SimpleFormNgTemplateComponent);
+ component = fixture.componentInstance;
+ });
+
+ it('should be able to create component instance', () => {
+ expect(component).toBeDefined();
+ });
+});
diff --git a/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.ts b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.ts
new file mode 100644
index 0000000..76cbe44
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-ng-template/components/simple-form-ng-template/simple-form-ng-template.component.ts
@@ -0,0 +1,89 @@
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { BootstrapDropdownControlModel, BootstrapTextFieldModel } from 'bootstrap-controls';
+import { DynamicFormGroup, TemplateModel } from '@skynet-ng/dynamic-form';
+
+@Component({
+ selector: 'showcase-simple-form-ng-template',
+ templateUrl: './simple-form-ng-template.component.html',
+ styleUrls: ['./simple-form-ng-template.component.scss']
+})
+export class SimpleFormNgTemplateComponent implements OnInit {
+ @ViewChild('alertTmpl', { static: true }) alertTemplate: TemplateRef;
+
+ @ViewChild('wrapper')
+ private wrapper: TemplateRef;
+
+ templates: { [key: string]: TemplateRef };
+
+ private errorTexts = {
+ required: 'This field is required'
+ };
+
+ formModel = new DynamicFormGroup({
+ greenBox: new TemplateModel({
+ alertClass: 'alert-success',
+ text:
+ 'This is template applied in FormModel as first element. Click here to add elements before and after form control and click again to hide them'
+ }),
+ name: new BootstrapTextFieldModel({
+ initialInputs: {
+ label: 'Your name',
+ placeholder: 'Please enter your name here',
+ required: true,
+ errorTexts: this.errorTexts
+ },
+ validators: Validators.required
+ }),
+ email: new BootstrapTextFieldModel({
+ initialInputs: {
+ label: 'Email',
+ placeholder: 'Please enter your email here',
+ required: true,
+ errorTexts: this.errorTexts
+ },
+ validators: Validators.required
+ }),
+ subject: new BootstrapDropdownControlModel({
+ initialInputs: {
+ label: 'Subject',
+ options: ['Incorrect work', 'Unexpected behaviour'],
+ required: true,
+ placeholder: 'Please pick subject',
+ errorTexts: this.errorTexts
+ },
+ validators: Validators.required
+ }),
+ message: new BootstrapTextFieldModel({
+ initialInputs: { label: 'Your message', placeholder: 'Message', multiline: true }
+ })
+ });
+
+ get formGroup() {
+ return this.formModel;
+ }
+
+ click() {
+ if (!this.templates) {
+ this.templates = {};
+
+ ['name', 'email', 'subject', 'message'].forEach(str => (this.templates[str] = this.wrapper));
+
+ (this.formModel.items).hello = new BootstrapTextFieldModel({
+ initialInputs: {
+ label: 'Email',
+ placeholder: 'Please enter youre email here',
+ required: true,
+ errorTexts: this.errorTexts
+ }
+ });
+ } else {
+ this.templates = null;
+ (this.formModel.items).hello = null;
+ }
+ }
+
+ ngOnInit() {
+ this.formModel.items.greenBox.templateRef = this.alertTemplate;
+ }
+}
diff --git a/apps/showcase/src/app/modules/simple-form-ng-template/simple-form-ng-template.module.ts b/apps/showcase/src/app/modules/simple-form-ng-template/simple-form-ng-template.module.ts
new file mode 100644
index 0000000..ed78419
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-ng-template/simple-form-ng-template.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SimpleFormNgTemplateComponent } from './components';
+import { DynamicFormModule } from '@skynet-ng/dynamic-form';
+import { BootstrapControlsModule } from 'bootstrap-controls';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ RouterModule.forChild([{ path: '', component: SimpleFormNgTemplateComponent }]),
+ DynamicFormModule,
+ BootstrapControlsModule
+ ],
+ declarations: [SimpleFormNgTemplateComponent]
+})
+export class SimpleFormNgTemplateModule {}
diff --git a/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/index.ts b/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/index.ts
new file mode 100644
index 0000000..b42740e
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/index.ts
@@ -0,0 +1,3 @@
+export {
+ SimpleFormWithControlsStylingComponent
+} from './simple-form-with-controls-styling/simple-form-with-controls-styling.component';
diff --git a/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/simple-form-with-controls-styling/simple-form-with-controls-styling.component.html b/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/simple-form-with-controls-styling/simple-form-with-controls-styling.component.html
new file mode 100644
index 0000000..b4a2aed
--- /dev/null
+++ b/apps/showcase/src/app/modules/simple-form-with-controls-styling/components/simple-form-with-controls-styling/simple-form-with-controls-styling.component.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+ DynamicForm supports styling of several controls and styling of particular control.
+ Here is example how styling of controls works. All you need to do is to specify styles through ::ng-deep. If you want
+ to specify styles for all controls you need to do it in styles for elemnts that has '@skynet-ng/dynamic-form' attribute. If you
+ want to style particular control you can do it by styling '.#controlName#' class, where '#controlName#' is name that
+ you create control with in formModel.
+