refactor(app): migrate remaining form sections [EE-6231] (#10938)

app/react-tools/withFormValidation.ts

@@ -1,6 +1,6 @@
 import { IFormController, IComponentOptions, IModule } from 'angular';
 import { FormikErrors } from 'formik';
-import { SchemaOf } from 'yup';
+import { SchemaOf, object } from 'yup';
 import _ from 'lodash';
 import { ComponentType } from 'react';
 
@@ -40,7 +40,8 @@ export function withFormValidation<TProps, TValue, TData = never>(
   Component: ComponentType<WithFormFieldProps<TProps, TValue>>,
   componentName: string,
   propNames: PropNames<TProps>[],
-  schemaBuilder: (validationData?: TData) => SchemaOf<TValue>
+  schemaBuilder: (validationData?: TData) => SchemaOf<TValue>,
+  isPrimitive = false
 ) {
   const reactComponentName = `react${_.upperFirst(componentName)}`;
 
@@ -54,7 +55,8 @@ export function withFormValidation<TProps, TValue, TData = never>(
       createFormValidationComponent(
         reactComponentName,
         propNames,
-        schemaBuilder
+        schemaBuilder,
+        isPrimitive
       )
     );
 }
@@ -62,7 +64,8 @@ export function withFormValidation<TProps, TValue, TData = never>(
 export function createFormValidationComponent<TFormModel, TData = never>(
   componentName: string,
   propNames: Array<string>,
-  schemaBuilder: (validationData?: TData) => SchemaOf<TFormModel>
+  schemaBuilder: (validationData?: TData) => SchemaOf<TFormModel>,
+  isPrimitive = false
 ): IComponentOptions {
   const kebabName = _.kebabCase(componentName);
   const propsWithErrors = [...propNames, 'errors', 'values'];
@@ -76,7 +79,7 @@ export function createFormValidationComponent<TFormModel, TData = never>(
         on-change="($ctrl.handleChange)"
       ></${kebabName}>
     </ng-form>`,
-    controller: createFormValidatorController(schemaBuilder),
+    controller: createFormValidatorController(schemaBuilder, isPrimitive),
     bindings: Object.fromEntries(
       [...propsWithErrors, 'validationData', 'onChange'].map((p) => [p, '<'])
     ),
@@ -84,10 +87,11 @@ export function createFormValidationComponent<TFormModel, TData = never>(
 }
 
 function createFormValidatorController<TFormModel, TData = never>(
-  schemaBuilder: (validationData?: TData) => SchemaOf<TFormModel>
+  schemaBuilder: (validationData?: TData) => SchemaOf<TFormModel>,
+  isPrimitive = false
 ) {
   return class FormValidatorController {
-    errors?: FormikErrors<TFormModel> = {};
+    errors?: FormikErrors<TFormModel>;
 
     $async: <T>(fn: () => Promise<T>) => Promise<T>;
 
@@ -118,12 +122,17 @@ function createFormValidatorController<TFormModel, TData = never>(
       return this.$async(async () => {
         this.form?.$setValidity('form', true, this.form);
 
-        this.errors = await validateForm<TFormModel>(
-          () => schemaBuilder(this.validationData),
-          value
-        );
+        const schema = schemaBuilder(this.validationData);
+        this.errors = undefined;
+        const errors = await (isPrimitive
+          ? validateForm<{ value: TFormModel }>(
+              () => object({ value: schema }),
+              { value }
+            ).then((r) => r?.value)
+          : validateForm<TFormModel>(() => schema, value));
 
-        if (this.errors && Object.keys(this.errors).length > 0) {
+        if (errors && Object.keys(errors).length > 0) {
+          this.errors = errors as FormikErrors<TFormModel> | undefined;
           this.form?.$setValidity('form', false, this.form);
         }
       });