Related controls hidden and disabled has a loop on change
Closed this issue · 6 comments
Hi!
I'm submitting a
[x] Bug / Regression
[ ] Feature Request / Proposal
I'm using
NG Dynamic Forms Version: `13.0.0`
[ ] Basic UI
[ ] Bootstrap UI
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material
[ ] NG Bootstrap
[ ] Prime NG
Description
I'm working with Angular 11, and when i create related controls inside groups I has performance issues. Seems like the DISABLED matcher makes subscription being called and has a loop for a while. How i can prevent these loops? (in the screenshot, you can see the conflictive part, is in dynamic-form-relation.service.ts).
The principal issue is that UI is not fluid.
[
{
"type": "RADIO_GROUP",
"id": "antecedentesAnticonceptivos",
"required": true,
"printable": true,
"printLabel": "Antecedentes anticonceptivos (aplica)",
"validators": {
"required": null
},
"errorMessages": {
"required": "Campo requerido"
},
"options": [
{
"label": "Si",
"value": "Si"
},
{
"label": "No",
"value": "No"
}
],
"layout": {
"grid": {
"host": "col-12 col-md-5 col-lg-2 col-xl-6 offsetr-xl-1",
"container": "pt-md-20"
}
}
},
{
"type": "TEXT",
"id": "textoSexo",
"centerVertical": true,
"value": "Sexo",
"printable": false,
"layout": {
"grid": {
"host": "col-5 col-sm-4 col-md-3 col-lg-2 col-xl-1"
}
},
"relations": [
{
"match": "DISABLED",
"when": [
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
},
{
"match": "HIDDEN",
"when": [
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
}
]
},
{
"type": "RADIO_GROUP",
"id": "hombreOMujer",
"required": true,
"printable": true,
"printLabel": "Sexo",
"validators": {
"required": null
},
"errorMessages": {
"required": "Campo requerido"
},
"options": [
{
"label": "Hombre",
"value": "hombre"
},
{
"label": "Mujer",
"value": "mujer"
}
],
"layout": {
"grid": {
"host": "col-6 col-lg-6 col-xl-6",
"container": "pt-md-20"
}
},
"relations": [
{
"match": "DISABLED",
"when": [
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
},
{
"match": "HIDDEN",
"when": [
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
}
]
},
{
"id": "esMujer",
"type": "GROUP",
"disabled": true,
"group": [
{
"type": "TEXT",
"id": "textoSituacion",
"centerVertical": true,
"value": "Situación",
"printable": false,
"layout": {
"grid": {
"host": "col-5 col-sm-4 col-md-3 col-lg-2 col-xl-1"
}
}
},
{
"type": "RADIO_GROUP",
"id": "postMenopausicaOFertil",
"required": true,
"printable": true,
"printLabel": "Situación",
"validators": {
"required": null
},
"errorMessages": {
"required": "Campo requerido"
},
"options": [
{
"label": "Post-Menopáusica",
"value": "postMenopausica"
},
{
"label": "Edad fértil",
"value": "edadFertil"
}
],
"layout": {
"grid": {
"host": "col-6 col-md-6 col-lg-4 col-xl-4",
"container": "pt-md-20"
}
}
},
{
"type": "TEXTAREA",
"id": "metodoAnticonceptivoACO",
"name": "metodoAnticonceptivoACO",
"label": "Método anticonceptivo (ACO)",
"rows": 2,
"required": true,
"disabled": true,
"grammarCheck": true,
"printable": true,
"printLabel": "Método anticonceptivo (ACO)",
"validators": {
"required": null
},
"errorMessages": {
"required": "Campo requerido"
},
"layout": {
"grid": {
"host": "col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"
}
},
"relations": [
{
"match": "DISABLED",
"when": [
{
"id": "postMenopausicaOFertil",
"value": "edadFertil"
},
{
"id": "postMenopausicaOFertil",
"value": null
}
]
},
{
"match": "HIDDEN",
"when": [
{
"id": "postMenopausicaOFertil",
"value": "edadFertil"
},
{
"id": "postMenopausicaOFertil",
"value": null
}
]
}
]
}
],
"relations": [
{
"match": "DISABLED",
"when": [
{
"id": "hombreOMujer",
"value": "hombre"
},
{
"id": "hombreOMujer",
"value": null
},
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
},
{
"match": "HIDDEN",
"when": [
{
"id": "hombreOMujer",
"value": "hombre"
},
{
"id": "hombreOMujer",
"value": null
},
{
"id": "antecedentesAnticonceptivos",
"value": "No"
},
{
"id": "antecedentesAnticonceptivos",
"value": null
}
]
}
],
"layout":{
"grid": {
"host": "px-0 col-12"
}
}
},
{
"type": "TEXTAREA",
"id": "metodoAntecedentesAnticonceptivos",
"name": "metodoAntecedentesAnticonceptivos",
"label": "Método anticonceptivo",
"rows": 2,
"required": true,
"disabled": true,
"grammarCheck": true,
"printable": true,
"printLabel": "Método anticonceptivo",
"validators": {
"required": null
},
"errorMessages": {
"required": "Campo requerido"
},
"layout": {
"grid": {
"host": "col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"
}
},
"relations": [
{
"match": "DISABLED",
"when": [
{
"id": "hombreOMujer",
"value": "mujer"
},
{
"id": "hombreOMujer",
"value": null
}
]
},
{
"match": "HIDDEN",
"when": [
{
"id": "hombreOMujer",
"value": "mujer"
},
{
"id": "hombreOMujer",
"value": null
}
]
}
]
}
]Hi @begandroide
Do you mind to share your experience with dynamic forms
in the discussions of a new library to implement advanced features?
https://dev.to/myndpm/a-new-approach-to-have-dynamic-forms-in-angular-5d11
Thanks in advance!
@begandroide so I did something like this https://gist.github.com/knight-bubble/7d16332c3047c325176590cd6370dec5
It helped to get rid of that infinite loop.
Also don't forget to
providers: [{
provide: DynamicFormRelationService,
useClass: DynamicFormRelationDistinctValuesService
}]
in your module, where you redefine your that service.
this was really unexpected, thanks you @knight-bubble i will make this improvement in a few hours to see the behaviour.
I will left a comment in this thread if works for me, thanks again 👏
Thank you very much for sharing your code.
I'll add the distinctUntilChanged() operator and provide this as a bugfix with the next patch version
Should be fixed in 14.0.1