Allow dynamic re-registration of form field components

This commit is contained in:
Andrew Kingston 2021-11-18 14:18:06 +00:00
parent c309db623e
commit 4ce25fdf0b
2 changed files with 10 additions and 24 deletions

View File

@ -23,7 +23,7 @@
// Register field with form
const formApi = formContext?.formApi
const labelPos = fieldGroupContext?.labelPosition || "above"
const formField = formApi?.registerField(
$: formField = formApi?.registerField(
field,
type,
defaultValue,
@ -37,29 +37,16 @@
$: $component.editing && labelNode?.focus()
// Update form properties in parent component on every store change
const unsubscribe = formField?.subscribe(value => {
$: unsubscribe = formField?.subscribe(value => {
fieldState = value?.fieldState
fieldApi = value?.fieldApi
fieldSchema = value?.fieldSchema
})
onDestroy(() => unsubscribe?.())
// 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)
}
const updateDisabled = disabled => {
fieldApi?.setDisabled(disabled)
}
const updateLabel = e => {
builderStore.actions.updateProp("label", e.target.textContent)
}

View File

@ -96,15 +96,14 @@
return
}
// If we've already registered this field then wipe any errors and
// return the existing field
// If we've already registered this field then keep some existing state
let initialValue = initialValues[field] ?? defaultValue
let fieldId = `id-${generateID()}`
const existingField = getField(field)
if (existingField) {
existingField.update(state => {
state.fieldState.error = null
return state
})
return existingField
const { fieldState } = get(existingField)
initialValue = fieldState.value ?? initialValue
fieldId = fieldState.fieldId
}
// Auto columns are always disabled
@ -125,8 +124,8 @@
type,
step: step || 1,
fieldState: {
fieldId: `id-${generateID()}`,
value: initialValues[field] ?? defaultValue,
fieldId,
value: initialValue,
error: null,
disabled: disabled || fieldDisabled || isAutoColumn,
defaultValue,