Panel Dynamic

Repeat a layout by using Panel Dynamic question

                        

    
        Survey.StylesManager.applyTheme("default");
    


var json = {
   "pages": [
      {
         "name": "page1",
         "elements": [
            {
               "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'",
                    "choicesMin": 1,
                    "choicesMax": 115
                  },
                  {
                     "name": "deceasedage",
                     "type": "dropdown",
                     "title": "Deceased Age",
                     "isRequired": true,
                     "startWithNewLine": false,
                     "visibleIf": "{panel.isalive} = 'No'",
                     "choices": [
                        {
                           "value": -1,
                           "text": "Unknown"
                        }
                     ],
                    "choicesMin": 1,
                    "choicesMax": 115
                  },
                  {
                     "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'"
                  },
                  {
                     "type": "panel",
                     "name": "moreInfo",
                     "state": "expanded",
                     "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"
            }
         ]
      }
   ]
};

window.survey = new Survey.Model(json);


    survey.onComplete.add(function(result) {
        document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });

survey.data = {'relatives':[{'relativeType':'father'},{'relativeType':'mother'}]};

function onAngularComponentInit() {
    Survey.SurveyNG.render("surveyElement", { 
        model: survey 
    });
}
var HelloApp =
    ng.core
        .Component({
            selector: 'ng-app',
            template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
        .Class({
            constructor: function() {
            },
            ngOnInit: function() {
                onAngularComponentInit();
            }
    });
document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(HelloApp);
});


                    
<!DOCTYPE html>
<html>
<head>
    <title>Repeat a layout by using Panel Dynamic question, Angular2 Survey Library Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://npmcdn.com/zone.js/dist/zone-evergreen"></script>
    <script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.20/survey.angular.js"></script>
<link href="https://surveyjs.azureedge.net/1.1.20/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
            <ng-app></ng-app>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>