coder
diff --git a/‎site/components/Form/FormTextField.tsx
Lines changed: 18 additions & 3 deletions b/‎site/components/Form/FormTextField.tsx
Lines changed: 18 additions & 3 deletions
diff --git a/‎site/components/Form/types.ts
Lines changed: 16 additions & 0 deletions b/‎site/components/Form/types.ts
Lines changed: 16 additions & 0 deletions
diff --git a/‎site/pages/workspaces/create/[projectId].tsx
Lines changed: 6 additions & 4 deletions b/‎site/pages/workspaces/create/[projectId].tsx
Lines changed: 6 additions & 4 deletions
@@ -1,7 +1,7 @@
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import { FormikLike } from "../../util/formik"
 import React from "react"
 import { PasswordField } from "./PasswordField"
-import { FormikContextType } from "formik"
 
 /**
  * FormFieldProps are required props for creating form fields using a factory.
@@ -11,7 +11,22 @@ export interface FormFieldProps<T> {
    * form is a reference to a form or subform and is used to compute common
    * states such as error and helper text
    */
-  form: FormikContextType<T>
+  form: FormikLike<T>
+  /**
+   * formFieldName is a field name associated with the form schema.
+   */
+  formFieldName: keyof T
+}
+
+/**
+ * FormFieldProps are required props for creating form fields using a factory.
+ */
+export interface FormFieldProps<T> {
+  /**
+   * form is a reference to a form or subform and is used to compute common
+   * states such as error and helper text
+   */
+  form: FormikLike<T>
   /**
    * formFieldName is a field name associated with the form schema.
    */
@@ -124,7 +139,7 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
 
     // Conversion to a string primitive is necessary as formFieldName is an in
     // indexable type such as a string, number or enum.
-    const fieldId = String(formFieldName)
+    const fieldId = FormikLike.getFieldId<T>(form, String(formFieldName))
 
     const Component = isPassword ? PasswordField : TextField
     const inputType = isPassword ? undefined : type
 
@@ -0,0 +1,16 @@
+import { FormikLike } from "../../util/formik"
+
+/**
+ * FormFieldProps are required props for creating form fields using a factory.
+ */
+export interface FormFieldProps<T> {
+  /**
+   * form is a reference to a form or subform and is used to compute common
+   * states such as error and helper text
+   */
+  form: FormikLike<T>
+  /**
+   * formFieldName is a field name associated with the form schema.
+   */
+  formFieldName: keyof T
+}
@@ -1,7 +1,7 @@
 import React from "react"
 import { useRouter } from "next/router"
-import { useFormik, FormikContext } from "formik"
-import { firstOrOnly } from "./../../../util"
+import { useFormik } from "formik"
+import { firstOrOnly, subForm, FormikLike } from "./../../../util"
 import * as API from "../../../api"
 import { FormPage, FormButton } from "../../../components/PageTemplates"
 import { useRequestor } from "../../../hooks/useRequestor"
@@ -66,6 +66,8 @@ const CreateProjectPage: React.FC = () => {
     },
   })
 
+  const parametersForm: FormikLike<Record<string, string>> = subForm(form, "parameters")
+
   const cancel = () => {
     router.push(`/workspaces/create`)
   }
@@ -124,8 +126,8 @@ const CreateProjectPage: React.FC = () => {
                 return (
                   <FormRow>
                     <ParameterTextField
-                      form={form}
-                      formFieldName={"parameters." + param.id}
+                      form={parametersForm}
+                      formFieldName={param.id}
                       fullWidth
                       label={param.name}
                       helperText={param.description}