diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index ca607e7315..823e520764 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -22,7 +22,7 @@ // Register field with form const formApi = formContext?.formApi - const labelPosition = fieldGroupContext?.labelPosition || "above" + const labelPos = fieldGroupContext?.labelPosition || "above" const formField = formApi?.registerField( field, type, @@ -38,17 +38,23 @@ fieldApi = value?.fieldApi fieldSchema = value?.fieldSchema }) - onDestroy(() => unsubscribe && unsubscribe()) + onDestroy(() => unsubscribe?.()) - // Keep validation rules up to date + // Keep field state up to date with props which might change due to + // conditional UI $: updateValidation(validation) + $: updateDisabled(disabled) + + // Determine label class from position + $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}` + const updateValidation = validation => { fieldApi?.updateValidation(validation) } - // Extract label position from field group context - $: labelPositionClass = - labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}` + const updateDisabled = disabled => { + fieldApi?.setDisabled(disabled) + } @@ -56,7 +62,7 @@ diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte index 3cae94c3d0..fbf3d2db9f 100644 --- a/packages/client/src/components/app/forms/InnerForm.svelte +++ b/packages/client/src/components/app/forms/InnerForm.svelte @@ -248,10 +248,25 @@ } } + // Updates the disabled state of a certain field + const setDisabled = fieldDisabled => { + const fieldInfo = getField(field) + + // Auto columns are always disabled + const isAutoColumn = !!schema?.[field]?.autocolumn + + // Update disabled state + fieldInfo.update(state => { + state.fieldState.disabled = disabled || fieldDisabled || isAutoColumn + return state + }) + } + return { setValue, clearValue, updateValidation, + setDisabled, validate: () => { // Validate the field by force setting the same value again const { fieldState } = get(getField(field))