#28 dynamic forms wip

src/app/vm/vm-creation/data/vm-creation-filter.service.ts

@@ -1,8 +1,12 @@
+import { FormGroup } from '@angular/forms';
 import { VmCreationData } from './vm-creation-data';
 
 
 export class VmCreationFilterService {
-  public filter(data: VmCreationData): VmCreationData {
+  public filter(data: VmCreationData, form: FormGroup): VmCreationData {
+    if (form.controls.zone.value.name === 'US1.HighIO') {
+      data.serviceOfferings = [data.serviceOfferings[0]];
+    }
     return data;
   }
 }

src/app/vm/vm-creation/form/field.service.ts

@@ -4,11 +4,12 @@ import { TextField } from './fields/text-field';
 import { SelectField } from './fields/select-field';
 import { AutocompleteField } from './fields/autocomplete-field';
 import { VmCreationData } from '../data/vm-creation-data';
+import { FormGroup } from '@angular/forms';
 
 
 @Injectable()
 export class FieldService {
-  public getFields(data: VmCreationData): Array<BaseField<any>> {
+  public getFields(data: VmCreationData, form?: FormGroup): Array<BaseField<any>> {
     const state = data.getInitialState();
     let fields: Array<BaseField<any>> = [
       new TextField({
@@ -22,14 +23,14 @@ export class FieldService {
         key: 'zone',
         label: 'Zone',
         value: state.zone,
-        options: data.zones.map(zone => ({ key: zone, value: zone.name })),
+        options: form && data.zones.map(zone => ({ key: zone, value: zone.name })),
         order: 2
       }),
       new SelectField({
         key: 'serviceOffering',
         label: 'Service offering',
         value: state.serviceOffering,
-        options: data.serviceOfferings.map(offering => ({ key: offering, value: offering.name })),
+        options: form && data.serviceOfferings.map(offering => ({ key: offering, value: offering.name })),
         order: 3
       }),
       new SelectField({
@@ -48,6 +49,12 @@ export class FieldService {
       })
     ];
 
+    fields = fields.map(field => {
+      if (form && form.controls && form.controls[field.key] && form.controls[field.key].value) {
+        field.value = form.controls[field.key].value;
+      }
+      return field;
+    });
     return fields.sort((a, b) => a.order - b.order);
   }
 }

src/app/vm/vm-creation/test/test.component.ts

@@ -6,6 +6,7 @@ import { BaseField } from '../form/fields/base-field';
 import { VmCreationData } from '../data/vm-creation-data';
 import { VmCreationService } from '../vm-creation.service';
 import { VmCreationFilterService } from '../data/vm-creation-filter.service';
+import isEqual = require('lodash/isEqual');
 
 
 @Component({
@@ -30,11 +31,18 @@ export class TestComponent implements OnInit {
   }
 
   public subscribeToFormChanges(form: FormGroup): void {
+    this.fields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data, form), form);
     const changes = Object.values(form.controls).map(control => control.valueChanges);
-    Observable.merge(...changes).subscribe(_ => this.updateFields());
+    Observable.merge(...changes).subscribe(_ => this.updateFields(form));
   }
 
-  private updateFields(): void {
-    this.fields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data));
+  private updateFields(form: FormGroup): void {
+    const newFields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data, form), form);
+    newFields.forEach(newField => {
+      const oldField = this.fields.find(field => field.key === newField.key);
+      if (!isEqual(oldField, newField)) {
+        this.fields = newFields;
+      }
+    });
   }
 }