{{formControl.label}}*

{{formControl.label}} *

</div>
                <div ng-switch-when="checkbox-group"
                     class="margin-top-11"
                     ng-show="formControl.isHidden == undefined || !formControl.isHidden()">
                    <fieldset class="c-checkbox"
                              ng-class="{'f-inline': formControl.isInline}">
                        <legend aria-label="{{formControl.screenReaderText}}"
                                aria-describedby="{{formControl.describedByName}}"
                                class="c-label">
                            {{formControl.label}}<span ng-if="formControl.isRequired">*</span>
                        </legend>
                        <div>
                            <div>
                                <label class="c-label" ng-repeat="option in formControl.optionList">
                                    <input id="formControl{{formControl.id}}{{$index}}"
                                           aria-label="{{option.label}}"
                                           type="checkbox"
                                           name="{{formControl.name}}[]"
                                           ng-checked="formModel.questionsAndUserAnswers[formControl.name+$index]"
                                           ng-model="formModel.questionsAndUserAnswers[formControl.name+$index]"
                                           ng-click="option.onClickHandler == undefined || option.onClickHandler(formModel.questionsAndUserAnswers[formControl.name+$index], formControl)">
                                    <span>{{option.label}}</span>
                                </label>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div ng-switch-when="comment"
                     id="{{formControl.id}}"
                     class="margin-top-11"
                     ng-if="formControl.isHidden == undefined || !formControl.isHidden()">
                    <p>{{formControl.label}}</p>
                </div>
                <div ng-switch-when="dropdown-box"
                     id="formControl{{formControl.id}}Div"
                     class="margin-top-11"
                     ng-show="formControl.isHidden == undefined || !formControl.isHidden()">
                    <label class="c-label"
                           for="formControl{{formControl.id}}">
                        {{formControl.label}}<span ng-if="formControl.isRequired">*</span>
                    </label>
                    <select ng-options="option.label for option in formControl.optionList track by option.value"
                            ng-selected="formModel.questionsAndUserAnswers[formControl.name]"
                            ng-model="formModel.questionsAndUserAnswers[formControl.name]"
                            ng-change="formControl.onChangeHandler == undefined || formControl.onChangeHandler(formModel.questionsAndUserAnswers[formControl.name])"
                            id="formControl{{formControl.id}}" name="{{formControl.name}}"
                            class="col-6"
                            ng-required="formControl.isRequired && (formControl.isHidden == undefined || !formControl.isHidden())"
                            aria-invalid="false"
                            aria-label="{{formControl.screenReaderText}}"
                            aria-describedby="{{formControl.describedByName}}">
                        <option disabled selected value="" />
                        <option ng-if="formControl.placeholderText && formControl.placeholderText != ''"
                                ng-show="!model"
                                value="">
                            {{formControl.placeholderText}}
                        </option>
                    </select>
                </div>
                <div ng-switch-when="radio-button-group"
                     class="margin-top-11"
                     ng-show="formControl.isHidden == undefined || !formControl.isHidden()">
                    <fieldset class="c-radio"
                              ng-class="{'f-inline': formControl.isInline}"
                              role="radiogroup"
                              aria-label="{{formControl.label}}">
                        <legend aria-label="{{formControl.screenReaderText}}"
                                class="c-label"
                                aria-describedby="{{formControl.describedByName}}">
                            {{formControl.label}}<span ng-if="formControl.isRequired">*</span>
                        </legend>
                        <div ng-repeat="option in formControl.optionList">
                            <label for="formControl-{{formControl.id}}-{{$index}}"
                                   class="c-label"
                                   role="radio">
                                <input id="formControl-{{formControl.id}}-{{$index}}"
                                       type="radio"
                                       aria-label="{{option.label}}"
                                       name="{{formControl.name}}"
                                       ng-model="formModel.questionsAndUserAnswers[formControl.name]"
                                       value="{{option.value}}"
                                       ng-required="formControl.isRequired && (formControl.isHidden == undefined || !formControl.isHidden())"
                                       ng-blur="checkRadioButton(formControl)"
                                       ng-click="formControl.onChangeHandler == undefined || formControl.onChangeHandler(option)">
                                <span>{{option.label}}</span>
                            </label>
                        </div>
                    </fieldset>
                    <div class="validator-label"
                         ng-if="radioButtonRequired"
                         mwf-alert
                         data-label-of-control="{{formControl.screenReaderText}}"
                         data-type="error"
                         data-has-icon="true"
                         data-body="{{strings.validationMessages.requiredValidationLabel}}">
                    </div>
                </div>
                <div ng-switch-when="section-heading"
                     class="margin-top-11"
                     ng-show="formControl.isHidden == undefined || !formControl.isHidden()">
                    <h3 class="c-subheading-4 margin-top-20">{{formControl.label}}</h3>
                    <hr class="c-divider" role="presentation" />
                </div>
                <div ng-switch-when="file-attachment" class="margin-top-11 file-attachment" ng-show="formControl.isHidden == undefined || !formControl.isHidden()">
                    <p id="fileattachment-description{{formControl.id}}" class="file-limit-messages margin-top-20">{{strings.fileAttachment.description}}</p>
                    <p id="fileattachment-maxnumbe{{formControl.id}}" class="file-limit-messages file-limit-messages-2">{{strings.fileAttachment.maxNumberFileLabelFormat | compassFormat : {'file-number': strings.fileAttachment.maxFileNumber} }}</p>
                    <p id="fileattachment-maxsize{{formControl.id}}" class="file-limit-messages">{{strings.fileAttachment.maxFileSizeLabelFormat | compassFormat : {'file-size': strings.fileAttachment.maxSingleFileSize} }}</p>
                    <div class="c-file">
                        
                        <button id="formControl{{formControl.id}}Button"
                                aria-labelledby="formControl{{formControl.id}}Button fileattachment-errors{{formControl.id}} fileattachment-description{{formControl.id}} fileattachment-maxnumbe{{formControl.id}} fileattachment-maxsize{{formControl.id}}"
                                aria-describedby="{{formControl.describedByName}}"
                                class="c-button f-primary file-attach-button"
                                type="button"
                                name="files"
                                ngf-select
                                ng-model="formModel.questionsAndUserAnswers.files"
                                ngf-max-size="strings.fileAttachment.maxSingleFileSize * 1024 * 1024 * 1024"
                                ngf-max-files="strings.fileAttachment.maxFileNumber"
                                ngf-multiple="true"
                                ng-required="formControl.isRequired"
                                ngf-keep="'distinct'"
                                ngf-before-model-change="fileUploadBeforeModelChange($files, formControl)">
                            {{strings.fileAttachment.header}}
                        </button>
                    </div>
                    <ul class='c-group f-wrap-items'>
                        <li ng-repeat="file in formModel.questionsAndUserAnswers.files"
                            class='c-choice-summary'>
                            <a class="c-action-trigger c-glyph glyph-cancel"
                               href=""
                               ng-click="removeFile(file, formControl.id)"
                               aria-label="{{strings.removeLabel | compassFormat: {'remove-content': file.name} }}">
                                <span class='x-screen-reader'>{{strings.removeLabel | compassFormat: {'remove-content': file.name} }}</span>
                            </a>
                            <span>{{file.name}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="fileattachment-errors{{formControl.id}}"
                 ng-if="formControl.typeName == 'file-attachment'"
                 class="validation-messages alert alert-error">
                <div id="fileattachment-required"
                     ng-if="minFilesNotReached"
                     class="validator-label"
                     mwf-alert
                     data-label-of-control="{{formControl.screenReaderText}}"
                     data-type="error"
                     data-has-icon="true"
                     data-body="{{strings.fileAttachment.fileAttachmentRequiredMessage}}"></div>
                <div class="validator-label"
                     ng-show="formCtrl.files.$error.maxFiles || fileSelectionError"
                     mwf-alert
                     data-label-of-control="{{formControl.screenReaderText}}"
                     data-type="error"
                     data-has-icon="true"
                     data-body="{{strings.fileAttachment.maxNumberFileValidationLabel}}"></div>
                <div class="validator-label"
                     ng-show="formCtrl.files.$error.maxSize"
                     mwf-alert
                     data-label-of-control="{{formControl.screenReaderText}}"
                     data-type="error"
                     data-has-icon="true"
                     data-body="{{strings.fileAttachment.maxFileSizeValidationLabel | compassFormat: {'file-size' : strings.fileAttachment.maxSingleFileSize} }}"></div>
            </div>
            <div ng-if="formControl.validators"
                 class="validation-messages alert alert-error">
                <div ng-repeat="validator in formControl.validators">
                    <div ng-switch="validator.ruleName">
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="required-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error['required']"
                             mwf-alert data-label-of-control="{{formControl.screenReaderText}}"
                             data-type="error"
                             data-has-icon="true"
                             data-body="{{strings.validationMessages.requiredValidationLabel}}"></div>
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="email-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error['email']"
                             mwf-alert
                             data-label-of-control="{{formControl.screenReaderText}}"
                             data-type="error"
                             data-has-icon="true"
                             data-body="{{strings.validationMessages.emailValidationLabel}}"></div>
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="max-length-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error[validator.ruleName]"
                             mwf-alert
                             data-label-of-control="{{formControl.screenReaderText}}"
                             data-type="error"
                             data-has-icon="true"
                             data-body="{{strings.validationMessages.maxLengthValidationLabel | compassFormat: {'max-length': validator.value} }}"></div>
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="min-length-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error[validator.ruleName]"
                             mwf-alert
                             data-label-of-control="{{formControl.screenReaderText}}"
                             data-type="error"
                             data-has-icon="true"
                             data-body="{{strings.validationMessages.minLengthValidationLabel | compassFormat: {'min-length': validator.value} }}"></div>
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="ip-v4-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error[validator.ruleName]"
                             mwf-alert
                             ata-label-of-control="{{formControl.screenReaderText}}"
                             ata-type="error"
                             ata-has-icon="true"
                             data-body="{{strings.validationMessages.ipV4ValidationLabel}}"></div>
                        <div id="validator{{formControl.id}}{{validator.ruleName}}"
                             class="validator-label"
                             ng-switch-when="custom-validator"
                             ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error[validator.ruleName]"
                             mwf-alert
                             data-label-of-control="{{formControl.screenReaderText}}"
                             data-type="error"
                             data-has-icon="true"
                             data-body="{{validator.validationMessage}}"></div>
                    </div>
                </div>
                <div ng-if="formControl.typeName == 'input-box'">
                    <span class="validator-label"
                          ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error['inputBoxMaxLength']">
                        {{strings.validationMessages.maxLengthValidationLabel | compassFormat: {'max-length': '200'} }}
                    </span>
                </div>
                <div ng-if="formControl.typeName == 'text-area'">
                    <span class="validator-label"
                          ng-show="formCtrl[formControl.name].$touched && formCtrl[formControl.name].$error['textAreaMaxLength']">
                        {{strings.validationMessages.maxLengthValidationLabel | compassFormat: {'max-length': '2000'} }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="x-screen-reader"
     aria-live="polite">
    <p ng-if="showFormChangeMessage">{{strings.questionsUpdatedMessage}}</p>
</div>