dding select

src/app/_mock/testfields.ts

@@ -24,6 +24,11 @@ const passwordField = new fmd.PasswordField({
 	placeholder: 'It\'s a secret'
 });
 
+const selectField = new fmd.SelectField({
+	name: 'selectField',
+	options: ['', 'Apples', 'Oranges', 'Pears', 'Gorgonzola']
+});
+
 const checkButton = new fmd.CheckbuttonField({
 	name: 'checkButton',
 	value: '456'
@@ -74,6 +79,9 @@ export const formMetaDataObj = {
 	styledTextField,
 	textareaField,
 	passwordField,
+	selectField,
 	checkButton,
 	dropDownModifiedInput
 };
+
+console.dir(formMetaDataObj);

src/app/dynaform/components/index.ts

@@ -4,6 +4,7 @@
 export { TextComponent } from './native/text/text.component';
 export { TextareaComponent } from './native/textarea/textarea.component';
 export { PasswordComponent } from './native/password/password.component';
+export { SelectComponent } from './native/select/select.component';
 export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
 // export { CheckbuttonGroupComponent } from './custom/checkbutton-group/checkbutton-group.component';

src/app/dynaform/components/native/select/select.component.html

@@ -1,3 +1,3 @@
-<p>
-  select works!
-</p>
+<select [formControl]="control" class="form-control form-control-sm">
+	<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
+</select>

src/app/dynaform/components/native/select/select.component.ts

@@ -1,15 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { NativeInputComponent } from '../../_abstract/native-input/native-input.component';
 
 @Component({
-  selector: 'app-select',
-  templateUrl: './select.component.html',
-  styleUrls: ['./select.component.scss']
+	selector: 'app-select',
+	templateUrl: './select.component.html',
+	styleUrls: ['./select.component.scss']
 })
-export class SelectComponent implements OnInit {
+export class SelectComponent extends NativeInputComponent {
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+	exposeMetaInTemplate: string[] = ['options'];
 
 }

src/app/dynaform/models/index.ts

@@ -28,7 +28,7 @@ interface Option {
 }
 
 interface OptionsFieldMetaData extends SimpleFieldMetaData {
-	options: Option[];							// Array of Options - for select, radio-button-group and other 'multiple-choice' types
+	options;				// Array of Options - for select, radio-button-group and other 'multiple-choice' types
 }
 interface DropdownModifiedInputFieldMetaData extends SimpleFieldMetaData {
 	modifiers: string[];
@@ -71,10 +71,25 @@ class SimpleField {
 	}
 }
 
+class Option {
+	constructor(opt: string | Option) {
+		if (typeof opt === 'object') {
+			this.label = opt.label;
+			this.value = opt.value;
+		} else if (typeof opt === 'string') {
+			this.label = opt;
+			this.value = opt;
+		}
+	}
+}
+
 class OptionsField extends SimpleField {
-	options: Option[];
+	options: Option[] = [];
 	constructor(meta: OptionsFieldMetaData) {
 		super(meta);
+		if (Array.isArray(meta.options)) {
+			this.options = meta.options.reduce((acc, opt) => { acc.push(new Option(opt)); return acc; }, []);
+		}
 	}
 }