feat(controls): Added number control support

joaogarin · Sep 11, 2016 · 130f2f9 · 130f2f9
1 parent 4e8252a
commit 130f2f9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/frontend/src/app/controls/base/booleanControl/booleanControl.component.ts b/frontend/src/app/controls/base/booleanControl/booleanControl.component.ts
@@ -10,8 +10,8 @@ import { FormGroup, FormControl } from '@angular/forms';
     styles: [``],
     template: `
     <div [formGroup]="inputGroup">
-    <label>{{label}}</label>
-       <select formControlName="item" [(ngModel)]="value">
+    <label for="BooleanSelect">{{label}}</label>
+       <select id="BooleanSelect" formControlName="item" [(ngModel)]="value">
             <option [ngValue]="true">True</option>
             <option [ngValue]="false">False</option>
         </select>

diff --git a/frontend/src/app/controls/base/numberControl/numberControl.component.ts b/frontend/src/app/controls/base/numberControl/numberControl.component.ts
@@ -0,0 +1,26 @@
+/*
+ * Angular 2 decorators and services
+ */
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+    // The selector is what angular internally uses
+    selector: 'cb-number-control',
+    styles: [``],
+    template: `
+    <div [formGroup]="inputGroup">
+        <label for="numberElement">{{label}}</label>
+        <input id="numberElement" type="number" [(ngModel)]="value" formControlName="item" required/>
+    </div>
+    `,
+})
+export class NumberControlComponent {
+    @Input() label: string;
+    @Input() value: string;
+    @Input() inputGroup: FormGroup;
+
+    constructor() { }
+
+    ngOnInit() {}
+}
diff --git a/frontend/src/app/controls/base/stringControl/stringControl.component.ts b/frontend/src/app/controls/base/stringControl/stringControl.component.ts
@@ -10,8 +10,8 @@ import { FormGroup } from '@angular/forms';
     styles: [``],
     template: `
     <div [formGroup]="inputGroup">
-        <label>{{label}}</label>
-        <input type="text" [(ngModel)]="value" formControlName="item" />
+        <label for="stringElement">{{label}}</label>
+        <input id="stringElement" type="text" [(ngModel)]="value" formControlName="item" />
     </div>
     `,
 })

diff --git a/frontend/src/app/controls/index.ts b/frontend/src/app/controls/index.ts
@@ -1,5 +1,6 @@
 import { StringControlComponent } from './base/stringControl/stringControl.component.ts';
 import { BooleanControlComponent } from './base/booleanControl/booleanControl.component.ts';
+import { NumberControlComponent } from './base/numberControl/numberControl.component.ts';
 
 export const defaultControls = {
   // Basic
@@ -11,6 +12,10 @@ export const defaultControls = {
     control: BooleanControlComponent,
     nested: false,
   },
+  number: {
+    control: NumberControlComponent,
+    nested: false,
+  },
 };
 
 export { ControlsModule } from './controls.module.ts';