Update demo app.

akisvolanis · May 21, 2017 · dec9a81 · dec9a81
1 parent d8ff6ea
commit dec9a81
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/demo-app/src/app/app.component.html b/demo-app/src/app/app.component.html
@@ -1,3 +1,7 @@
+<h1>Template driven form example</h1>
+<simple-ng-tags [(ngModel)]="tags"></simple-ng-tags>
+<p>{{tags | json}}</p>
+<br><br> 
+<h1>Reactive form example</h1>
 <simple-ng-tags [formControl]="tagsControl"></simple-ng-tags>
-<br>
-{{tags | json}}
+<p>{{tagsControl.value | json}}</p>
diff --git a/demo-app/src/app/app.component.ts b/demo-app/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl } from "@angular/forms";
+import { FormControl, Validators } from "@angular/forms";
 
 @Component({
   selector: 'app-root',
@@ -8,10 +8,10 @@ import { FormControl } from "@angular/forms";
 })
 export class AppComponent {
   tags: any[] = ['tag 1', 'tag 2', 'tag 3'];
-  tagsControl = new FormControl();
+  tagsControl:FormControl;
 
   ngOnInit() {
-    this.tagsControl.setValue(this.tags);
+    this.tagsControl = new FormControl(['tag 1', 'tag 2', 'tag 3'], Validators.required);
     this.tagsControl.valueChanges.subscribe(tags => {
       console.log(tags);
     });

diff --git a/demo-app/src/app/simple-ng-tags/simple-ng-tags.component.scss b/demo-app/src/app/simple-ng-tags/simple-ng-tags.component.scss
@@ -6,6 +6,10 @@
   cursor: text;
   box-sizing: border-box;
   font-family: Sans-Serif;
+
+  &.ng-invalid {
+    background-color: rgba(169, 68, 66, .2);
+  }
 }
 
 * {
@@ -56,6 +60,7 @@ input {
   font-size: 14px;
   flex: 1 0 50px;
   border: none;
+  background: transparent;
   margin: 2px 6px !important;
 }