Comments (6)
I managed to get a workaround working using the form's (onChanges)
event callback. onChanges
is very trigger happy (upon initializing a form with data I counted it being invoked 35 times) and for some reason is sometimes called with an empty JSON, but when the event object is not empty and aside from being called in spite of no changes, it is very reliable in the sense that it does catch every change. This workaround as is does not work with onChange
inside an array, since lodash's get()
understands aField[1].value
but does not understand what aField[].value
means. Since I don't need it, I didn't go through the trouble. This could actually be implemented without lodash's _.get()
as long as your json is shallow.
I import lodash's get
:
import get from 'lodash/get.js';
onChanges
does not give me the object before the change, so I am keeping track of that myself:
lastChange: any = {};
I am recursively traversing the form
JSON looking for onChange callbacks, and saving them in a map structured like { formItemKey: callback }
:
onChanges: any = {};
populateForm: Function = (entity: any) => {
this.entity = entity;
this.lastChange = entity;
if (this.form) {
// recursively traverse the form json
let traverse = item => {
if (item.items) {
item.items.map(traverse);
} else if (item.tabs) {
item.tabs.map(traverse);
}
// keep track of onChange callbacks
if(item.onChange) {
this.onChanges[item.key] = item.onChange;
}
};
this.form.map(traverse);
}
};
ngOnInit() {
...
this.populateForm(this.entity);
}
Then in my onFormChange()
callback I find opportunities for early exit, checking if:
- the JSON is not empty (this happens half the time!)
- if the fields we have
onChange
callbacks for have actually been changed (no changes happens almost the other half the time)
Then, because all my onChange
callbacks return promises, I am using Promise.all so I can perform a redraw after everything is done, because my onChange
s are updating a select's titleMap
:
onFormChange(entity: any) {
let onChangesToCall = [];
// asf's (onChanges) is very trigger happy and often is invoked with a fake empty
// object, so ignore it
if(Object.keys(entity).length === 0 && entity.constructor === Object) {
return;
}
for (let [key, onChange] of Object.entries(this.onChanges)){
if(get(entity, key) === get(this.lastChange, key)) {
// no changes, no need to invoke onChange
continue;
}
// check needed so typescript won't complain when compiling
if(typeof onChange === 'function') {
onChangesToCall.push(onChange(get(entity, key)));
}
}
if(onChangesToCall.length <= 0) {
return;
}
Promise.all(onChangesToCall)
.then(() =>
// redraw
this.entityForm.initializeForm()
)
.catch(error => {
...
});
this.lastChange = entity;
}
If you do not need promises, or do not need to perform anything after all onChange
s are resolved (such as a redraw), you could very well just omit creating an onChangesToCall
array at all.
Finally, I link the callback in the html:
<json-schema-form
...
(onChanges)="onFormChange($event)">
</json-schema-form>
While far from ideal, especially in terms of performance, it does work.
from ajsf.
Same issue here.
Is there a workaround?
from ajsf.
Nice workarround @anasofiapaixao,
Boa continuação / Keep it going :)
from ajsf.
Hi @anasofiapaixao,
Would it be possible for you to publish a complete example on the site "stackblitz.com"?
Thank you very much in advance.
from ajsf.
Thanks @anasofiapaixao ! your approach was the best fit on my solution!
and @lapastina follow below my example based at @anasofiapaixao code:
https://stackblitz.com/edit/angular-json-schema-form-dynamic-select-data-form-demo
from ajsf.
Stale issue
from ajsf.
Related Issues (20)
- Angular 13 support HOT 1
- validationErrors: submit is enabled even if function return false HOT 1
- Reset Json Schema form
- support bootstrap 5
- Some performances issues with recent versions of Edge ?
- Warnings due to CommonJS or AMD dependencies which can cause optimization bailouts
- additionalProperties aren't displayed HOT 2
- customized widget doesn't return a value HOT 1
- The `None` item in enum dropdown lists considered as `"null"`
- [Question] How to implement your own UI components along with custom styling?
- NullInjectorError: No provider for Framework! HOT 1
- Angular 15 material design support HOT 2
- Get rid of deprecated FlexModule dependency HOT 2
- multipleOf validator uses default remainder operator to validate which results in incorrect result
- Invalid appearance "standard", valid values are "fill" or "outline".
- providing default values to components
- "defautWidgetOptions" typo
- Nested array, last element controls surfaced data
- Fieldset along with the Select all checkbox.
- Custom widget Not able to add
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ajsf.