diff --git a/src/FormularioForm.vue b/src/FormularioForm.vue
index 2a41913..74c6bdb 100644
--- a/src/FormularioForm.vue
+++ b/src/FormularioForm.vue
@@ -1,8 +1,5 @@
-
@@ -78,13 +75,6 @@ export default class FormularioForm extends Vue {
namedFieldErrors: Object = {}
- get classes () {
- return {
- 'formulario-form': true,
- [`formulario-form--${this.name}`]: !!this.name
- }
- }
-
get mergedFormErrors () {
return this.formErrors.concat(this.namedErrors)
}
@@ -118,7 +108,7 @@ export default class FormularioForm extends Vue {
}
get isVmodeled () {
- return !!(Object.prototype.hasOwnProperty.call(this.$options.propsData, 'formularioValue') &&
+ return !!(has(this.$options.propsData, 'formularioValue') &&
this._events &&
Array.isArray(this._events.input) &&
this._events.input.length)
@@ -248,14 +238,14 @@ export default class FormularioForm extends Vue {
showErrors () {
this.childrenShouldShowErrors = true
- this.registry.map(input => {
+ this.registry.forEach((input: FormularioInput) => {
input.formShouldShowErrors = true
})
}
hideErrors () {
this.childrenShouldShowErrors = false
- this.registry.map(input => {
+ this.registry.forEach((input: FormularioInput) => {
input.formShouldShowErrors = false
input.behavioralErrorVisibility = false
})
@@ -265,14 +255,26 @@ export default class FormularioForm extends Vue {
// Collect all keys, existing and incoming
const keys = Array.from(new Set(Object.keys(values).concat(Object.keys(this.proxy))))
keys.forEach(field => {
- const fieldComponent = this.registry.get(field) as FormularioInput
+ if (this.registry.hasNested(field)) {
+ this.registry.getNested(field).forEach((registryField, registryKey) => {
+ if (
+ !shallowEqualObjects(
+ getNested(values, registryKey),
+ getNested(this.proxy, registryKey)
+ )
+ ) {
+ this.setFieldValue(registryKey, getNested(values, registryKey))
+ }
- if (this.registry.has(field) &&
- !shallowEqualObjects(getNested(values, field), getNested(this.proxy, field)) &&
- !shallowEqualObjects(getNested(values, field), fieldComponent.proxy)
- ) {
- this.setFieldValue(field, getNested(values, field))
- this.registry.get(field).context.model = getNested(values, field)
+ if (
+ !shallowEqualObjects(
+ getNested(values, registryKey),
+ this.registry.get(registryKey).proxy
+ )
+ ) {
+ this.registry.get(registryKey).context.model = getNested(values, registryKey)
+ }
+ })
}
})
this.applyInitialValues()
diff --git a/src/FormularioInput.vue b/src/FormularioInput.vue
index 76cc3a6..9913f0a 100644
--- a/src/FormularioInput.vue
+++ b/src/FormularioInput.vue
@@ -58,7 +58,7 @@ export default class FormularioInput extends Vue {
}) id!: string|number|boolean
@Prop({ default: 'text' }) type!: string
- @Prop({ required: true }) name: string|boolean
+ @Prop({ required: true }) name!: string|boolean
@Prop({ default: false }) value!: any
@Prop({
@@ -359,7 +359,7 @@ export default class FormularioInput extends Vue {
/**
* Bound into the context object.
*/
- blurHandler () {
+ blurHandler (): void {
this.$emit('blur')
if (this.errorBehavior === 'blur') {
this.behavioralErrorVisibility = true
@@ -367,9 +367,9 @@ export default class FormularioInput extends Vue {
}
getInitialValue () {
- if (has(this.$options.propsData, 'value')) {
+ if (has(this.$options.propsData as ObjectType, 'value')) {
return this.value
- } else if (has(this.$options.propsData, 'formularioValue')) {
+ } else if (has(this.$options.propsData as ObjectType, 'formularioValue')) {
return this.formularioValue
}
return ''
diff --git a/src/libs/registry.ts b/src/libs/registry.ts
index 51ae8d8..70ecf86 100644
--- a/src/libs/registry.ts
+++ b/src/libs/registry.ts
@@ -49,6 +49,19 @@ export default class Registry {
return this.registry.has(key)
}
+ /**
+ * Check if the registry has elements, that equals or nested given key
+ */
+ hasNested (key: string) {
+ for (const i of this.registry.keys()) {
+ if (i === key || i.includes(key + '.')) {
+ return true
+ }
+ }
+
+ return false
+ }
+
/**
* Get a particular registry value.
*/
@@ -56,15 +69,39 @@ export default class Registry {
return this.registry.get(key)
}
+ /**
+ * Get registry value for key or nested to given key
+ */
+ getNested (key: string) {
+ const result = new Map()
+
+ for (const i of this.registry.keys()) {
+ if (i === key || i.includes(key + '.')) {
+ result.set(i, this.registry.get(i))
+ }
+ }
+
+ return result
+ }
+
/**
* Map over the registry (recursively).
*/
- map (callback: Function) {
+ map (mapper: Function) {
const value = {}
- this.registry.forEach((component, field) => Object.assign(value, { [field]: callback(component, field) }))
+ this.registry.forEach((component, field) => Object.assign(value, { [field]: mapper(component, field) }))
return value
}
+ /**
+ * Map over the registry (recursively).
+ */
+ forEach (callback: Function) {
+ this.registry.forEach((component, field) => {
+ callback(component, field)
+ })
+ }
+
/**
* Return the keys of the registry.
*/
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 7839ae0..19e10ce 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -30,13 +30,12 @@ export function shallowEqualObjects (objA: any, objB: any) {
const aKeys = Object.keys(objA)
const bKeys = Object.keys(objB)
- const len = aKeys.length
- if (bKeys.length !== len) {
+ if (bKeys.length !== aKeys.length) {
return false
}
- for (let i = 0; i < len; i++) {
+ for (let i = 0; i < aKeys.length; i++) {
const key = aKeys[i]
if (objA[key] !== objB[key]) {
diff --git a/test/unit/FormularioForm.test.js b/test/unit/FormularioForm.test.js
index f6fecc1..c5b01e0 100644
--- a/test/unit/FormularioForm.test.js
+++ b/test/unit/FormularioForm.test.js
@@ -308,12 +308,14 @@ describe('FormularioForm', () => {
template: `
{{ error }}
@@ -335,12 +337,14 @@ describe('FormularioForm', () => {
template: `
{{ error }}