diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx
index 7e205f5d3c5..f200d5859d9 100644
--- a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx
+++ b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../serverGroupConfigurationModel.cf';
 import { CloudFoundryImageReader } from 'cloudfoundry/image/image.reader.cf';
 import { ICloudFoundryCluster, ICloudFoundryServerGroup } from 'cloudfoundry/domain';
+import { Field } from 'formik';
 
 export interface ICloudFoundryCreateServerGroupArtifactSettingsProps
   extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {
@@ -179,24 +180,6 @@ class ArtifactSettingsImpl extends React.Component<
     }
   };
 
-  private artifactReferenceUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const reference = event.target.value;
-    const { artifact } = this.props.formik.values;
-    if (isArtifactSource(artifact)) {
-      artifact.reference = reference;
-      this.props.formik.setFieldValue('artifact.reference', reference);
-    }
-  };
-
-  private artifactPatternUpdater = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const pattern = event.target.value;
-    const { artifact } = this.props.formik.values;
-    if (isTriggerSource(artifact)) {
-      artifact.pattern = pattern;
-      this.props.formik.setFieldValue('artifact.pattern', pattern);
-    }
-  };
-
   private getArtifactInput = (): JSX.Element => {
     const { artifactAccounts } = this.props;
     const { values, errors: _errors } = this.props.formik;
@@ -225,13 +208,7 @@ class ArtifactSettingsImpl extends React.Component<
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Reference</div>
           <div className="col-md-7">
-            <input
-              type="text"
-              required={true}
-              className="form-control input-sm"
-              value={isArtifactSource(artifact) && artifact.reference}
-              onChange={this.artifactReferenceUpdated}
-            />
+            <Field type="text" required={true} className="form-control input-sm" name="artifact.reference" />
           </div>
         </div>
         {errors.artifact &&
@@ -343,11 +320,7 @@ class ArtifactSettingsImpl extends React.Component<
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Artifact Pattern</div>
           <div className="col-md-7">
-            <input
-              className="form-control input-sm no-spel"
-              value={isTriggerSource(artifact) && artifact.pattern}
-              onChange={this.artifactPatternUpdater}
-            />
+            <Field className="form-control input-sm no-spel" type="text" name="artifact.pattern" />
           </div>
         </div>
         <div className="form-group row">
diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx
index 566d4ac2d91..7eb90bf99df 100644
--- a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx
+++ b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
+import { Field, FormikErrors } from 'formik';
 import Select, { Option } from 'react-select';
 
 import {
@@ -91,18 +91,6 @@ class BasicSettingsImpl extends React.Component<
     this.props.formik.setFieldValue('region', region);
   };
 
-  private stackUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const stack = event.target.value;
-    this.props.formik.values.stack = stack;
-    this.props.formik.setFieldValue('stack', stack);
-  };
-
-  private detailUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const freeFormDetails = event.target.value;
-    this.props.formik.values.freeFormDetails = freeFormDetails;
-    this.props.formik.setFieldValue('freeFormDetails', freeFormDetails);
-  };
-
   private deploymentStrategyUpdated = (option: Option<string>): void => {
     this.props.formik.values.strategy = option.value;
     this.props.formik.setFieldValue('strategy', option.value);
@@ -138,7 +126,7 @@ class BasicSettingsImpl extends React.Component<
             Stack <HelpField id="cf.serverGroup.stack" />
           </div>
           <div className="col-md-7">
-            <input className="form-control input-sm" type="text" value={values.stack} onChange={this.stackUpdated} />
+            <Field className="form-control input-sm" type="text" name="stack" />
           </div>
         </div>
         <div className="form-group">
@@ -146,12 +134,7 @@ class BasicSettingsImpl extends React.Component<
             Detail <HelpField id="cf.serverGroup.detail" />
           </div>
           <div className="col-md-7">
-            <input
-              className="form-control input-sm"
-              type="text"
-              value={values.freeFormDetails}
-              onChange={this.detailUpdated}
-            />
+            <Field className="form-control input-sm" type="text" name="freeFormDetails" />
           </div>
         </div>
         <div className="form-group">
diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/configurationSettings.cf.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/configurationSettings.cf.tsx
index 86e9d7546db..cc9821ece60 100644
--- a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/configurationSettings.cf.tsx
+++ b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/configurationSettings.cf.tsx
@@ -41,39 +41,6 @@ function isManifestTriggerSource(
 class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroupConfigurationSettingsProps> {
   public static LABEL = 'Configuration';
 
-  private memoryUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.memory = event.target.value;
-      this.props.formik.setFieldValue('manifest.memory', event.target.value);
-    }
-  };
-
-  private diskQuotaUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.diskQuota = event.target.value;
-      this.props.formik.setFieldValue('manifest.diskQuota', event.target.value);
-    }
-  };
-
-  private instancesUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.instances = Number(event.target.value);
-      this.props.formik.setFieldValue('manifest.instances', event.target.value);
-      this.capacityUpdated(event.target.value);
-    }
-  };
-
-  private buildpackUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.buildpack = event.target.value;
-      this.props.formik.setFieldValue('manifest.buildpack', event.target.value);
-    }
-  };
-
   private manifestTypeUpdated = (type: string): void => {
     switch (type) {
       case 'artifact':
@@ -100,68 +67,6 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
     this.props.formik.setFieldValue('manifest', this.props.formik.values.manifest);
   };
 
-  private addEnvironmentVariable = (): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      if (manifest.environment === undefined) {
-        manifest.environment = [];
-      }
-      manifest.environment.push({ key: '', value: '' });
-      this.props.formik.setFieldValue('manifest.env', manifest.environment);
-    }
-  };
-
-  private removeEnvironmentVariable = (index: number): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.environment.splice(index, 1);
-      this.props.formik.setFieldValue('manifest.env', manifest.environment);
-    }
-  };
-
-  private environmentKeyUpdated = (index: number, event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.environment[index].key = event.target.value;
-      this.props.formik.setFieldValue('manifest.env', manifest.environment);
-    }
-  };
-
-  private environmentValueUpdated = (index: number, event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.environment[index].value = event.target.value;
-      this.props.formik.setFieldValue('manifest.env', manifest.environment);
-    }
-  };
-
-  private serviceUpdated = (index: number, event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.services[index] = event.target.value;
-      this.props.formik.setFieldValue('manifest.services', manifest.services);
-    }
-  };
-
-  private addServicesVariable = (): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      if (manifest.services === undefined) {
-        manifest.services = [];
-      }
-      manifest.services.push('');
-      this.props.formik.setFieldValue('manifest.services', manifest.services);
-    }
-  };
-
-  private removeServicesVariable = (index: number): void => {
-    const { manifest } = this.props.formik.values;
-    if (isManifestDirectSource(manifest)) {
-      manifest.services.splice(index, 1);
-      this.props.formik.setFieldValue('manifest.services', manifest.services);
-    }
-  };
-
   private artifactAccountUpdated = (option: Option<string>): void => {
     const { manifest } = this.props.formik.values;
     if (isManifestArtifactSource(manifest) || isManifestTriggerSource(manifest)) {
@@ -170,24 +75,6 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
     }
   };
 
-  private artifactReferenceUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const reference = event.target.value;
-    const { manifest } = this.props.formik.values;
-    if (isManifestArtifactSource(manifest)) {
-      manifest.reference = reference;
-      this.props.formik.setFieldValue('manifest.reference', reference);
-    }
-  };
-
-  private manifestPatternUpdater = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const pattern = event.target.value;
-    const { manifest } = this.props.formik.values;
-    if (isManifestTriggerSource(manifest)) {
-      manifest.pattern = pattern;
-      this.props.formik.setFieldValue('manifest.pattern', pattern);
-    }
-  };
-
   private capacityUpdated = (capacity: string): void => {
     this.props.formik.setFieldValue('capacity.min', capacity);
     this.props.formik.setFieldValue('capacity.max', capacity);
@@ -195,15 +82,6 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
   };
 
   private directConfiguration = (manifest: ICloudFoundryManifestSource): JSX.Element => {
-    const {
-      addEnvironmentVariable,
-      removeEnvironmentVariable,
-      environmentKeyUpdated,
-      environmentValueUpdated,
-      serviceUpdated,
-      addServicesVariable,
-      removeServicesVariable,
-    } = this;
     const { errors } = this.props.formik as any;
     if (isManifestDirectSource(manifest)) {
       return (
@@ -211,25 +89,25 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Memory</div>
             <div className="col-md-7">
-              <input type="text" value={manifest.memory} onChange={this.memoryUpdated} />
+              <Field type="text" name="manifest.memory" />
             </div>
           </div>
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Disk Quota</div>
             <div className="col-md-7">
-              <input type="text" value={manifest.diskQuota} onChange={this.diskQuotaUpdated} />
+              <Field type="text" name="manifest.diskQuota" />
             </div>
           </div>
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Instances</div>
             <div className="col-md-7">
-              <input type="number" value={manifest.instances} onChange={this.instancesUpdated} />
+              <Field type="number" name="manifest.instances" />
             </div>
           </div>
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Buildpack</div>
             <div className="col-md-7">
-              <input type="text" value={manifest.buildpack} onChange={this.buildpackUpdated} />
+              <Field type="text" name="manifest.buildpack" />
             </div>
           </div>
 
@@ -280,99 +158,109 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
           <div className="form-group">
             <div className="col-md-12">
               <b>Environment Variables</b>
-              <table className="table table-condensed packed tags">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {manifest.environment &&
-                    manifest.environment.map(function(environment, index) {
-                      return (
-                        <tr key={index}>
-                          <td>
-                            <input
-                              className="form-control input-sm"
-                              type="text"
-                              value={environment.key}
-                              required={true}
-                              onChange={event => environmentKeyUpdated(index, event)}
-                            />
-                          </td>
-                          <td>
-                            <input
-                              className="form-control input-sm"
-                              type="text"
-                              value={environment.value}
-                              required={true}
-                              onChange={event => environmentValueUpdated(index, event)}
-                            />
-                          </td>
-                          <td>
-                            <a className="btn btn-link sm-label">
-                              <span
-                                className="glyphicon glyphicon-trash"
-                                onClick={() => removeEnvironmentVariable(index)}
-                              />
-                            </a>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-                <tfoot>
-                  <tr>
-                    <td colSpan={2}>
-                      <button type="button" className="add-new col-md-12" onClick={addEnvironmentVariable}>
-                        <span className="glyphicon glyphicon-plus-sign" /> Add New Environment Variable
-                      </button>
-                    </td>
-                  </tr>
-                </tfoot>
-              </table>
+              <FieldArray
+                name="manifest.environment"
+                render={arrayHelpers => (
+                  <table className="table table-condensed packed tags">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {manifest.environment &&
+                        manifest.environment.map(function(_, index) {
+                          return (
+                            <tr key={index}>
+                              <td>
+                                <Field
+                                  className="form-control input-sm"
+                                  type="text"
+                                  name={`manifest.environment.${index}.key`}
+                                  required={true}
+                                />
+                              </td>
+                              <td>
+                                <Field
+                                  className="form-control input-sm"
+                                  type="text"
+                                  name={`manifest.environment.${index}.value`}
+                                  required={true}
+                                />
+                              </td>
+                              <td>
+                                <a className="btn btn-link sm-label">
+                                  <span
+                                    className="glyphicon glyphicon-trash"
+                                    onClick={() => arrayHelpers.remove(index)}
+                                  />
+                                </a>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <td colSpan={2}>
+                          <button
+                            type="button"
+                            className="add-new col-md-12"
+                            onClick={() => arrayHelpers.push({ key: '', value: '' })}
+                          >
+                            <span className="glyphicon glyphicon-plus-sign" /> Add New Environment Variable
+                          </button>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                )}
+              />
             </div>
           </div>
 
           <div className="form-group">
             <div className="col-md-12">
               <b>Bind Services</b>
-              <table className="table table-condensed packed metadata">
-                <tbody>
-                  {manifest.services &&
-                    manifest.services.map(function(service, index) {
-                      return (
-                        <tr key={index}>
-                          <td>
-                            <input
-                              className="form-control input-sm"
-                              value={service}
-                              type="text"
-                              ng-model="command.services[$index]"
-                              required={true}
-                              onChange={event => serviceUpdated(index, event)}
-                            />
-                          </td>
-                          <td>
-                            <a className="btn btn-link sm-label" onClick={() => removeServicesVariable(index)}>
-                              <span className="glyphicon glyphicon-trash" />
-                            </a>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-                <tfoot>
-                  <tr>
-                    <td colSpan={1}>
-                      <button type="button" className="add-new col-md-12" onClick={addServicesVariable}>
-                        <span className="glyphicon glyphicon-plus-sign" /> Bind Service
-                      </button>
-                    </td>
-                  </tr>
-                </tfoot>
-              </table>
+              <FieldArray
+                name="manifest.services"
+                render={arrayHelpers => (
+                  <table className="table table-condensed packed metadata">
+                    <tbody>
+                      {manifest.services &&
+                        manifest.services.map(function(_, index) {
+                          return (
+                            <tr key={index}>
+                              <td>
+                                <Field
+                                  className="form-control input-sm"
+                                  name={`manifest.services.${index}`}
+                                  type="text"
+                                  required={true}
+                                />
+                              </td>
+                              <td>
+                                <a className="btn btn-link sm-label" onClick={() => arrayHelpers.remove(index)}>
+                                  <span className="glyphicon glyphicon-trash" />
+                                </a>
+                              </td>
+                            </tr>
+                          );
+                        })}
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <td colSpan={1}>
+                          <button type="button" className="add-new col-md-12" onClick={() => arrayHelpers.push('')}>
+                            <span className="glyphicon glyphicon-plus-sign" /> Bind Service
+                          </button>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                )}
+              />
             </div>
           </div>
           {errors.manifest &&
@@ -395,17 +283,19 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
               </div>
             ))}
           {errors.manifest &&
-            errors.manifest.env && (
+            errors.manifest.environment &&
+            errors.manifest.environment.map((environmentError: string) => (
               <div className="wizard-pod-row-errors">
-                <ValidationMessage message={errors.manifest.env} type={'error'} />
+                <ValidationMessage message={environmentError} type={'error'} />
               </div>
-            )}
+            ))}
           {errors.manifest &&
-            errors.manifest.services && (
+            errors.manifest.services &&
+            errors.manifest.services.map((servicesError: string) => (
               <div className="wizard-pod-row-errors">
-                <ValidationMessage message={errors.manifest.services} type={'error'} />
+                <ValidationMessage message={servicesError} type={'error'} />
               </div>
-            )}
+            ))}
         </div>
       );
     } else {
@@ -422,11 +312,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Manifest Pattern</div>
           <div className="col-md-7">
-            <input
-              className="form-control input-sm no-spel"
-              value={isManifestTriggerSource(manifest) && manifest.pattern}
-              onChange={this.manifestPatternUpdater}
-            />
+            <Field className="form-control input-sm no-spel" name="manifest.pattern" type="text" />
           </div>
         </div>
         <div className="form-group row">
@@ -492,13 +378,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Reference</div>
             <div className="col-md-7">
-              <input
-                type="text"
-                required={true}
-                className="form-control input-sm"
-                onChange={this.artifactReferenceUpdated}
-                value={manifest.reference}
-              />
+              <Field type="text" required={true} className="form-control input-sm" name="manifest.reference" />
             </div>
           </div>
           {errors.manifest &&
@@ -601,7 +481,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
             errors.manifest.routes = errors.manifest.routes || [];
             errors.manifest.routes.push(`A route was not specified`);
           }
-          const regex = /^([a-zA-Z0-9_-]+)\.([a-zA-Z0-9_.-]+)(\:[0-9]+)?([\/a-zA-Z0-9_-]+)?$/gm;
+          const regex = /^([a-zA-Z0-9_-]+)\.([a-zA-Z0-9_.-]+)(:[0-9]+)?([\/a-zA-Z0-9_-]+)?$/gm;
           if (route && regex.exec(route) === null) {
             errors.manifest = errors.manifest || {};
             errors.manifest.routes = errors.manifest.routes || [];
@@ -616,11 +496,13 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
         values.manifest.services.forEach(function(service) {
           if (!service) {
             errors.manifest = errors.manifest || {};
-            errors.manifest.services = `A service was not specified`;
+            errors.manifest.services = errors.manifest.services || [];
+            errors.manifest.services.push(`A service was not specified`);
           }
           if (!!existingServices[service]) {
             errors.manifest = errors.manifest || {};
-            errors.manifest.services = `Service "` + service + `" was duplicated`;
+            errors.manifest.services = errors.manifest.services || [];
+            errors.manifest.services.push(`Service "` + service + `" was duplicated`);
           }
           existingServices[service] = service;
         });
@@ -630,14 +512,17 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
         values.manifest.environment.forEach(function(e) {
           if (!e.key || !e.value) {
             errors.manifest = errors.manifest || {};
-            errors.manifest.env = `An environment variable was not set`;
+            errors.manifest.environment = errors.manifest.environment || [];
+            errors.manifest.environment.push(`An environment variable was not set`);
           } else {
             if (e.key) {
               const validKeyRegex = /^\w+$/g;
               if (!validKeyRegex.exec(e.key)) {
                 errors.manifest = errors.manifest || {};
-                errors.manifest.env =
-                  `'` + e.key + `' is an invalid environment variable name and must be alphanumeric`;
+                errors.manifest.environment = errors.manifest.environment || [];
+                errors.manifest.environment.push(
+                  `'` + e.key + `' is an invalid environment variable name and must be alphanumeric`,
+                );
               }
             }
             const value = existingKeys[e.key];
@@ -645,8 +530,10 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
               existingKeys[e.key] = e.value;
             } else {
               errors.manifest = errors.manifest || {};
-              errors.manifest.env =
-                `Duplicate environment variable: "` + e.key + `" set to "` + value + `" and "` + e.value + `"`;
+              errors.manifest.environment = errors.manifest.environment || [];
+              errors.manifest.environment.push(
+                `Duplicate environment variable: "` + e.key + `" set to "` + value + `" and "` + e.value + `"`,
+              );
             }
           }
         });