Form Control Event Binding

README.md

@@ -12,7 +12,12 @@
 
 > You can follow the [tutorial here](https://toddmotto.com/angular-dynamic-components-forms)
 
-To get started, first of all clone this repo into a folder on your computer.
+
+### Running the seed or final project
+
+* To get started with the seed project, [clone this repo](https://github.com/toddmotto/angular-dynamic-forms/tree/seed).
+
+* To run the final project, [clone this repo](https://github.com/toddmotto/angular-dynamic-forms).
 
 Once you've cloned the repo, install all the dependencies by running:
 
@@ -34,4 +39,4 @@ yarn start
 npm start
 ```
 
-This will start up webpack and a local development server at http://localhost:3000.
+This will start up webpack and a local development server at [localhost:3000](http://localhost:3000).

app/app.component.ts

@@ -25,17 +25,17 @@ export class AppComponent implements AfterViewInit {
   config: FieldConfig[] = [
     {
       type: 'input',
-      label: 'Username',
-      name: 'username',
-      placeholder: 'Enter your username..',
+      label: 'Full name',
+      name: 'name',
+      placeholder: 'Enter your name',
       validation: [Validators.required, Validators.minLength(4)]
     },
     {
       type: 'select',
-      label: 'Select',
-      name: 'test',
-      options: ['Advert', 'Word of mouth', 'Other'],
-      placeholder: 'Select an option..',
+      label: 'Favourite Food',
+      name: 'food',
+      options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
+      placeholder: 'Select an option',
       validation: [Validators.required]
     },
     {
@@ -55,7 +55,7 @@ export class AppComponent implements AfterViewInit {
     });
 
     this.form.setDisabled('submit', true);
-    this.form.setValue('username', 'Todd Motto');
+    this.form.setValue('name', 'Todd Motto');
   }
 
   submit(value: {[name: string]: any}) {

app/dynamic-form/components/form-select/form-select.component.scss

@@ -1,5 +1,6 @@
 select {
   -webkit-appearance: none;
+  -moz-appearance: none;
   text-indent: .01px;
   text-overflow: '';
   overflow: hidden;

app/dynamic-form/dynamic-form.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { DynamicFieldDirective } from './components/dynamic-field/dynamic-field.directive';
 import { DynamicFormComponent } from './containers/dynamic-form/dynamic-form.component';
@@ -11,7 +11,6 @@ import { FormSelectComponent } from './components/form-select/form-select.compon
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule,
     ReactiveFormsModule
   ],
   declarations: [

package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@angular/compiler": "4.0.0-rc.3",
     "@angular/compiler-cli": "4.0.0-rc.3",
-    "@types/core-js": "2.4.1",
+    "@types/core-js": "0.9.35",
     "@types/node": "7.0.4",
     "@types/reflect-metadata": "0.0.5",
     "@ultimate/aot-loader": "0.1.12",
@@ -30,9 +30,9 @@
     "@angular/forms": "4.0.0-rc.3",
     "@angular/platform-browser": "4.0.0-rc.3",
     "core-js": "2.4.1",
-    "reflect-metadata": "0.1.9",
+    "reflect-metadata": "0.1.10",
     "rxjs": "5.2.0",
     "tslib": "1.6.0",
-    "zone.js": "0.7.8"
+    "zone.js": "0.8.1"
   }
 }