Cannot input answer to questions on dynamic panel under Angular5 in Chrome and Firefox

[sfcrebecca]

Are you requesting a feature, reporting a bug or ask a question?

Reporting a bug

What is the current behavior?

Unable to enter answer to questions on dynamic panel under Angular5 Questions outside the dynamic panel are working fine. All questions are working fine if not placed in dynamic panel If I replace the JSON with one without dynamic panel, all questions have no problem.

What is the expected behavior?

Questions on dynamic panel should be working in (at least) IE, Chrome and Firefox.

How would you reproduce the current behavior (if this is a bug)?

1. Setup the environment:

   • Node: 8.7.0
   • npm 5.4.2
   • Angular 5.0.1
   • Angular 1.5.0
   • survey-angular@0.95.0
   • @type/react@15.0.21
   • OS win32 x64

2. Create an Angular5 project: ng new

3. Copy and paste the JSON of this example: https://plnkr.co/edit/5AhEXAi6t2LBCl9YHbmy?p=preview

4. Test the survey in the browsers

   • Chrome 62.0.3202.94
   • Firefox 57.0
   • IE11.0

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/5AhEXAi6t2LBCl9YHbmy?p=preview

Test code { "pages": [ { "name": "page1", "elements": [ {type:"text", name: "name", title: "Please enter your name"}, { "type": "paneldynamic", "name": "relatives", "title": "Please enter all blood relatives you know", "renderMode": "progressTop", "templateTitle": "Information about: {panel.relativeType}", "templateElements": [ { "name": "relativeType", "type": "dropdown", "title": "Relative", "choices": [ "father", "mother", "brother", "sister", "son", "dauhter" ], "isRequired": true }, { "name": "isalive", "type": "radiogroup", "title": "Alive?", "startWithNewLine": false, "isRequired": true, "colCount": 0, "choices": [ "Yes", "No" ] }, { "name": "liveage", "type": "dropdown", "title": "Age", "isRequired": true, "startWithNewLine": false, "visibleIf": "{panel.isalive} = 'Yes'", "choices": [ 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60 ] }, { "name": "deceasedage", "type": "dropdown", "title": "Deceased Age", "isRequired": true, "startWithNewLine": false, "visibleIf": "{panel.isalive} = 'No'", "choices": [ { "value": -1, "text": "Unknown" }, 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60 ] }, { "name": "causeofdeathknown", "type": "radiogroup", "title": "Cause of Death Known?", "isRequired": true, "colCount": 0, "startWithNewLine": false, "visibleIf": "{panel.isalive} = 'No'", "choices": [ "Yes", "No" ] }, { "name": "causeofdeath", "type": "text", "title": "Cause of Death", "isRequired": true, "startWithNewLine": false, "visibleIf": "{panel.isalive} = 'No' and {panel.causeofdeathknown} = 'Yes'" }, { "name": "showmore", "type": "radiogroup", "title": "Show more?", "colCount": 0, "choices": [ "Yes", "No" ] }, { "type": "panel", "name": "moreInfo", "visibleIf": "{panel.showmore} = 'Yes'", "title": "Detail Information about: {panel.relativeType}", "elements": [ { "type": "matrixdynamic", "name": "relativeillness", "title": "Describe the illness or condition.", "rowCount": 0, "columns": [ { "name": "illness", "cellType": "dropdown", "title": "Illness/Condition", "choices": [ "Cancer", "Heart Disease", "Diabetes", "Stroke/TIA", "High Blood Pressure", "High Cholesterol or Triglycerides", "Liver Disease", "Alcohol or Drug Abuse", "Anxiety, Depression or Psychiatric Illness", "Tuberculosis", "Anesthesia Complications", "Genetic Disorder", "Other – describe" ], "isRequired": true }, { "name": "description", "cellType": "text", "title": "Describe", "isRequired": true } ] } ] } ], "panelCount": 2, "panelAddText": "Add a blood relative", "panelRemoveText": "Remove the relative" } ] } ] }

Specify your [please see above]

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue):
• surveyjs version:

[dmitry-kurmanov]

We've created an example with the ng5 and the json above: https://stackblitz.com/edit/surveyjs-angular5-example-gh771, could you check it please?

[sfcrebecca]

Hi @dmitrykurmanov , thank your for our example.

I have copy my JSON to your example and it works!! I'm still figuring out what's the problem with my environment.

Can I say Surveyjs is certified on Angular5 and all existing components/libraries should be supported as in Angular4?

I'm also testing some custom widgets in the same environment also but can't make them work neither. I suspect it is also caused by my environment instead of Angular5. Do you have another example for those custom widgets which enables me to have a try?

Many thanks for your assistance.

[dmitry-kurmanov]

Can I say Surveyjs is certified on Angular5 and all existing components/libraries should be supported as in Angular4?

Yes, if you will find some unsupported part you could create an issue and we will fix it.

Do you have another example for those custom widgets which enables me to have a try?

Ok, I will create an example with angular 5 and custom widgets like the example with reactjs above

[sfcrebecca]

@dmitrykurmanov thanks so much for your assistance!!