Add forms example #19

Author: Stijn Goethals

README.md

@@ -122,4 +122,8 @@ Every single demo is separate component. Bellow you can find links to components
 #### [Demo](https://github.com/tealpartners/ng-select2/tree/master/src/app/demos/allow-clear) with allow clear option
 - Demo with allow clear option
 
+
+#### [Demo](https://github.com/tealpartners/ng-select2/tree/master/src/app/demos/form) with a form
+- Demo with a form
+
 Demo forked from: https://github.com/NejcZdovc/ng2-select2-demo

package.json

@@ -28,6 +28,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
+    "github": "ng build --prod --base-href https://tealpartners.github.io/ng-select2/ && npx angular-cli-ghpages --dir dist-site/ng-select2",
     "packagr": "ng-packagr -p projects/ng-select2/ng-package.json",
     "packagr-prod": "ng-packagr -p projects/ng-select2/ng-package.prod.json"
   },

src/app/app.component.html

@@ -18,4 +18,6 @@ <h1>ng-select2 demo's</h1>
   <app-value-changed></app-value-changed>
   <hr>
   <app-allow-clear></app-allow-clear>
-</div>
+  <hr>
+  <app-form></app-form>
+</div>

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { BasicComponent } from './demos/basic/basic.component';
 import { ChangeComponent } from './demos/change/change.component';
 import { CustomArrayComponent } from './demos/custom-array/custom-array.component';
 import { DynamicComponent } from './demos/dynamic/dynamic.component';
+import { FormComponent } from './demos/form/form.component';
 import { MultipleComponent } from './demos/multiple/multiple.component';
 import { OptionsComponent } from './demos/options/options.component';
 import { TemplateComponent } from './demos/template/template.component';
@@ -27,7 +28,8 @@ import { DataService } from './services/data.service';
     MultipleComponent,
     CustomArrayComponent,
     ValueChangedComponent,
-    AllowClearComponent
+    AllowClearComponent,
+    FormComponent
   ],
   imports: [
     BrowserModule,

src/app/demos/form/form.component.css

@@ -0,0 +1,32 @@
+<h2>10. Form demo</h2>
+<form (ngSubmit)="onSubmit()"
+      #testForm="ngForm">
+
+  <div class="form-group"
+       *ngIf="!submitted else showData">
+    <label for="name">Name: </label>
+    <ng-select2 [data]="exampleData"
+                [(ngModel)]="value"
+                required
+                name="name"
+                #name="ngModel"
+                [width]="300">
+    </ng-select2>
+    <div [hidden]="name.valid || name.pristine"
+         class="alert alert-danger">
+      Name is required
+    </div>
+  </div>
+
+  <button *ngIf="!submitted"
+          type="submit"
+          class="btn btn-success"
+          [disabled]="!testForm.form.valid">Submit</button>
+  <button type="button"
+          class="btn btn-default"
+          (click)="testForm.reset(); submitted = false">Reset</button>
+</form>
+
+<ng-template #showData>
+  <p>Form is submitted with value: {{value}}</p>
+</ng-template>

src/app/demos/form/form.component.html

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Select2OptionData } from 'ngSelect2';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css']
+})
+export class FormComponent implements OnInit {
+  public exampleData: Array<Select2OptionData>;
+
+  public formControl = new FormControl();
+  public value: string;
+
+  ngOnInit() {
+    this.exampleData = [
+      {
+        id: 'cool-guy',
+        text: 'Cool guy'
+      }
+    ];
+  }
+
+  public submitted = false;
+
+  onSubmit() {
+    this.submitted = true;
+  }
+}