diff --git a/app/kubernetes/views/applications/create/createApplicationController.js b/app/kubernetes/views/applications/create/createApplicationController.js index 4f3631ea2..c9e34a36b 100644 --- a/app/kubernetes/views/applications/create/createApplicationController.js +++ b/app/kubernetes/views/applications/create/createApplicationController.js @@ -290,7 +290,7 @@ class KubernetesCreateApplicationController { onAutoScaleChange(values) { return this.$async(async () => { // when enabling the auto scaler, set the default values - if (!this.oldFormValues.AutoScaler.isUsed && values.isUsed) { + if (!this.formValues.AutoScaler.isUsed && values.isUsed) { this.formValues.AutoScaler = { isUsed: values.isUsed, minReplicas: 1, diff --git a/app/react-tools/react2angular.tsx b/app/react-tools/react2angular.tsx index 59e11d733..f00ebb593 100644 --- a/app/react-tools/react2angular.tsx +++ b/app/react-tools/react2angular.tsx @@ -38,16 +38,7 @@ export function react2angular[]>( Component: React.ComponentType, propNames: U & ([PropNames] extends [U[number]] ? unknown : PropNames) ): IComponentOptions & { name: string } { - const bindings = Object.fromEntries( - propNames.map((key) => { - // use two way binding for errors, to avoid shifting the layout from errors going between undefined <-> some value when using inputs. - // See https://portainer.atlassian.net/browse/EE-6570 for more context - if (key === 'errors') { - return [key, '=']; - } - return [key, '<']; - }) - ); + const bindings = Object.fromEntries(propNames.map((key) => [key, '<'])); return { bindings, diff --git a/app/react-tools/withFormValidation.ts b/app/react-tools/withFormValidation.ts index b2ea4f903..74f0442fa 100644 --- a/app/react-tools/withFormValidation.ts +++ b/app/react-tools/withFormValidation.ts @@ -17,6 +17,8 @@ interface FormFieldProps { type WithFormFieldProps = TProps & FormFieldProps; +type ValidationResult = FormikErrors | undefined; + /** * This utility function is used for wrapping React components with form validation. * When used inside an Angular form, it sets the form to invalid if the component values are invalid. @@ -109,6 +111,7 @@ function createFormValidatorController( this.handleChange = this.handleChange.bind(this); this.runValidation = this.runValidation.bind(this); + this.validate = this.validate.bind(this); } async handleChange(newValues: TFormModel) { @@ -123,21 +126,31 @@ function createFormValidatorController( this.form?.$setValidity('form', true, this.form); const schema = schemaBuilder(this.validationData); - this.errors = undefined; - const errors = await (isPrimitive - ? validateForm<{ value: TFormModel }>( - () => object({ value: schema }), - { value } - ).then((r) => r?.value) - : validateForm(() => schema, value)); + this.errors = await this.validate(schema, value, isPrimitive); - if (errors && Object.keys(errors).length > 0) { - this.errors = errors as FormikErrors | undefined; + if (this.errors && Object.keys(this.errors).length > 0) { this.form?.$setValidity('form', false, this.form); } }); } + async validate( + schema: SchemaOf, + value: TFormModel, + isPrimitive: boolean + ): Promise> { + return this.$async(async () => { + if (isPrimitive) { + const result = await validateForm<{ value: TFormModel }>( + () => object({ value: schema }), + { value } + ); + return result?.value as ValidationResult; + } + return validateForm(() => schema, value); + }); + } + async $onChanges(changes: { values?: { currentValue: TFormModel }; validationData?: { currentValue: TData };