search

formio / angular

JSON powered forms for Angular
https://formio.github.io/angular-demo
MIT License
625 stars 466 forks source link

[BUG] #468

Closed mihirsane closed 5 months ago

mihirsane commented 4 years ago

Environment

Steps to Reproduce

  1. Use this json {"components":[{"label":"Columns","columns":[{"components":[{"label":"First Name","spellcheck":true,"tableView":true,"validate":{"required":true,"unique":false,"multiple":false,"custom":"","customPrivate":false,"strictDateValidation":false,"minLength":"","maxLength":"","pattern":""},"key":"firstName","type":"textfield","input":true,"hideOnChildrenHidden":false,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"mask":false,"inputType":"text","inputFormat":"plain","inputMask":"","id":"elotjb"},{"label":"Gender","labelPosition":"top","widget":"html5","placeholder":"","description":"","tooltip":"","customClass":"","tabindex":"","hidden":false,"hideLabel":false,"autofocus":false,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"dataSrc":"values","data":{"values":[{"label":"Male","value":"male"},{"label":"Female","value":"female"}],"resource":"","json":"","url":"","custom":""},"valueProperty":"","dataType":"","template":"<span>{{ item.label }}</span>","searchEnabled":true,"selectThreshold":0.3,"readOnlyValue":false,"customOptions":{},"persistent":true,"protected":false,"dbIndex":false,"encrypted":false,"clearOnHide":true,"customDefaultValue":"","calculateValue":"","allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"customMessage":"","custom":"","customPrivate":false,"json":"","unique":false,"multiple":false,"strictDateValidation":false},"unique":false,"errorLabel":"","key":"gender","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"select","indexeddb":{"filter":{}},"minSearch":0,"limit":100,"input":true,"hideOnChildrenHidden":false,"prefix":"","suffix":"","refreshOn":"","redrawOn":"","showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"clearOnRefresh":false,"lazyLoad":true,"filter":"","searchField":"","authenticate":false,"selectFields":"","searchThreshold":0.3,"fuseOptions":{"include":"score","threshold":0.3},"id":"e6zj6a","defaultValue":""},{"label":"Email","labelPosition":"top","placeholder":"","description":"","tooltip":"","prefix":"","suffix":"","widget":{"type":"input"},"customClass":"","tabindex":"","hidden":false,"hideLabel":false,"mask":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"plain","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"pattern":"","customMessage":"","custom":"","customPrivate":false,"json":"","minLength":"","maxLength":"","strictDateValidation":false,"unique":false,"multiple":false},"unique":false,"kickbox":{"enabled":false},"errorLabel":"","key":"email","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"email","input":true,"refreshOn":"","showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"inputType":"email","inputMask":"","id":"eq81jgr","hideOnChildrenHidden":false,"defaultValue":null},{"label":"Clinical History","optionsLabelPosition":"right","tableView":false,"defaultValue":{"ihd":false,"osteoarthritis":false,"diabetes":false,"hypertension":false},"values":[{"label":"IHD","value":"ihd","shortcut":""},{"label":"Osteoarthritis","value":"osteoarthritis","shortcut":""},{"label":"Diabetes","value":"diabetes","shortcut":""},{"label":"Hypertension","value":"hypertension","shortcut":""}],"clearOnHide":false,"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false},"key":"clinicalHistory","type":"selectboxes","input":true,"inputType":"checkbox","hideOnChildrenHidden":false,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":null,"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"fieldSet":false,"inline":false,"id":"ea2ibus"}],"width":6,"offset":0,"push":0,"pull":0},{"components":[{"label":"Last Name","spellcheck":true,"tableView":true,"validate":{"required":true,"unique":false,"multiple":false,"custom":"","customPrivate":false,"strictDateValidation":false,"minLength":"","maxLength":"","pattern":""},"key":"lastName","type":"textfield","input":true,"hideOnChildrenHidden":false,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"mask":false,"inputType":"text","inputFormat":"plain","inputMask":"","id":"eadw9th"},{"label":"Blood Group","labelPosition":"top","widget":"html5","placeholder":"","description":"","tooltip":"","customClass":"","tabindex":"","hidden":false,"hideLabel":false,"autofocus":false,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"dataSrc":"values","data":{"values":[{"label":"O+","value":"oplus"},{"label":"O-","value":"ominus"},{"label":"A+","value":"aplus"},{"label":"A-","value":"aminus"},{"label":"B+","value":"bplus"},{"label":"B-","value":"bminus"},{"label":"AB+","value":"abplus"},{"label":"AB-","value":"abminus"}],"resource":"","json":"","url":"","custom":""},"valueProperty":"","dataType":"","template":"<span>{{ item.label }}</span>","searchEnabled":true,"selectThreshold":0.3,"readOnlyValue":false,"customOptions":{},"persistent":true,"protected":false,"dbIndex":false,"encrypted":false,"clearOnHide":true,"customDefaultValue":"","calculateValue":"","allowCalculateOverride":false,"validateOn":"change","validate":{"required":true,"customMessage":"","custom":"","customPrivate":false,"json":"","unique":false,"multiple":false,"strictDateValidation":false},"unique":false,"errorLabel":"","key":"bloodGroup","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"select","indexeddb":{"filter":{}},"minSearch":0,"limit":100,"input":true,"hideOnChildrenHidden":false,"prefix":"","suffix":"","refreshOn":"","redrawOn":"","showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"clearOnRefresh":false,"lazyLoad":true,"filter":"","searchField":"","authenticate":false,"selectFields":"","searchThreshold":0.3,"fuseOptions":{"include":"score","threshold":0.3},"id":"eixc31r","defaultValue":""},{"label":"Phone Number","labelPosition":"top","placeholder":"","description":"","tooltip":"","prefix":"","suffix":"","widget":{"type":"input"},"inputMask":"(+99) 999-9999-999","allowMultipleMasks":false,"customClass":"","tabindex":"","hidden":false,"hideLabel":false,"mask":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"plain","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"customMessage":"","custom":"","customPrivate":false,"json":"","strictDateValidation":false,"minLength":"","maxLength":"","pattern":"","unique":false,"multiple":false},"unique":false,"errorLabel":"","key":"phoneNumber","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"phoneNumber","input":true,"refreshOn":"","showCharCount":false,"showWordCount":false,"inputType":"tel","id":"e6head","defaultValue":"","hideOnChildrenHidden":false},{"label":"Social History","optionsLabelPosition":"right","tableView":false,"defaultValue":{"smoking":false,"alcohol":false},"values":[{"label":"Smoking","value":"smoking","shortcut":""},{"label":"Alcohol","value":"alcohol","shortcut":""}],"clearOnHide":false,"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false},"key":"socialHistory","type":"selectboxes","input":true,"inputType":"checkbox","hideOnChildrenHidden":false,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":null,"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"fieldSet":false,"inline":false,"id":"elwm5mp"}],"width":6,"offset":0,"push":0,"pull":0}],"tableView":false,"key":"columns","type":"columns","input":false,"path":"columns","placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":false,"hidden":false,"clearOnHide":false,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":null,"attributes":{},"validateOn":"change","validate":{"required":false,"custom":"","customPrivate":false,"strictDateValidation":false},"conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"tree":false,"autoAdjust":false,"hideOnChildrenHidden":false,"id":"evjtzd2"},{"label":"Lab Tests","labelPosition":"top","description":"","tooltip":"","disableAddingRemovingRows":false,"reorder":false,"addAnother":"Add Visit","addAnotherPosition":"bottom","defaultOpen":false,"layoutFixed":false,"enableRowGroups":false,"customClass":"","tabindex":"","hidden":false,"hideLabel":false,"autofocus":false,"disabled":false,"tableView":false,"modalEdit":true,"defaultValue":[{"selectBoxes1":{"":false,"test":false,"test1":false},"textField":"","textField1":"","visitDateTime":"","hbA1C":"","bp":""}],"persistent":false,"protected":false,"dbIndex":false,"encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"customMessage":"","custom":"","customPrivate":false,"json":"","unique":false,"multiple":false,"strictDateValidation":false},"unique":false,"errorLabel":"","key":"labTests","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"datagrid","input":true,"components":[{"label":"Date & Time","tableView":false,"datePicker":{"disableWeekends":false,"disableWeekdays":false,"showWeeks":true,"startingDay":0,"initDate":"","minMode":"day","maxMode":"year","yearRows":4,"yearColumns":5,"minDate":null,"maxDate":null},"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false},"key":"visitDateTime","type":"datetime","input":true,"suffix":"<i ref=\"icon\" class=\"fa fa-calendar\" style=\"\"></i>","widget":{"type":"calendar","displayInTimezone":"viewer","language":"en","useLocaleSettings":false,"allowInput":true,"mode":"single","enableTime":true,"noCalendar":false,"format":"yyyy-MM-dd hh:mm a","hourIncrement":1,"minuteIncrement":1,"time_24hr":false,"minDate":null,"disableWeekends":false,"disableWeekdays":false,"maxDate":null},"placeholder":"","prefix":"","customClass":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"format":"yyyy-MM-dd hh:mm a","useLocaleSettings":false,"allowInput":true,"enableDate":true,"enableTime":true,"defaultDate":"","displayInTimezone":"viewer","timezone":"","datepickerMode":"day","timePicker":{"hourStep":1,"minuteStep":1,"showMeridian":true,"readonlyInput":false,"mousewheel":true,"arrowkeys":true},"customOptions":{},"id":"e8ia84o"},{"label":"BP","inputMask":"999/999","spellcheck":true,"tableView":true,"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false,"minLength":"","maxLength":"","pattern":""},"key":"bp","type":"textfield","input":true,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"mask":false,"inputType":"text","inputFormat":"plain","id":"edtl6so"},{"label":"HbA1c","spellcheck":true,"tableView":true,"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false,"minLength":"","maxLength":"","pattern":""},"key":"hbA1C","type":"textfield","input":true,"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"mask":false,"inputType":"text","inputFormat":"plain","inputMask":"","id":"eu7lihr"}],"path":"dataGrid","placeholder":"","prefix":"","suffix":"","multiple":false,"refreshOn":"","widget":null,"showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"tree":true,"id":"eojxn5d"},{"type":"button","label":"Submit","key":"submit","disableOnInvalid":true,"input":true,"tableView":false,"validate":{"unique":false,"multiple":false,"required":false,"custom":"","customPrivate":false,"strictDateValidation":false},"placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":false,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"size":"md","leftIcon":"","rightIcon":"","block":false,"action":"submit","theme":"primary","dataGridLabel":true,"id":"eow7np"}],"display":"form"}

Expected behavior

Modal should not open automatically on setting form

Observed behavior

The modal opens by default as soon as the form json is being set.

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block: <form-builder [form]="form" (change)="onChange($event)"></form-builder>

getForm() {
    this.patientService.getForm().subscribe(data => {
      this.form = data;
      console.log('GetForm--' + JSON.stringify(data));
    });
  }
jeriah-formio commented 4 years ago

@mihirsane Do you mind providing a jsfiddle showing the issue? This would be greatly appreciated! Thanks!

mihirsane commented 4 years ago

I can't create a jsfiddle but checkout this link https://youtu.be/KpJCNw3ewSY to the video. Also, this happens when I enable the Modal Edit to the datagrid.

wag110894 commented 3 years ago

@mihirsane, are you still able to replicate this issue on the latest version of Angular-formio?

Looking forward to your response.

Sidiro23 commented 5 months ago

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.