question.component.html

<div [formGroup]="form" class="question">
  <label [attr.for]="question.externalQuestionId">{{question.questionText}}</label>

  <div *ngIf="form !== undefined" [ngSwitch]="getQuestionRendering(question).toString()">

    <input *ngSwitchCase="'TEXTBOX'" [formControlName]="question.externalQuestionId" [id]="question.externalQuestionId">

    <div *ngSwitchCase="'RADIO'" class="radio-question">
      <ng-container *ngFor="let option of question.answerOptions">
        <input [formControlName]="question.externalQuestionId" [id]="question.externalQuestionId + ' ' + option.optionCode" type="radio"
          [value]="option.optionCode">
        <label for="{{question.externalQuestionId + ' ' + option.optionCode}}">{{option.optionText}}</label>
      </ng-container>
    </div>

    <div *ngSwitchCase="'COMBOBOX'" class="combobox-question">
      <select *ngIf="question.answerType.toUpperCase() === 'SELECTONE'" [id]="question.externalQuestionId" [formControlName]="question.externalQuestionId">
        <option *ngFor="let opt of question.answerOptions" [value]="opt.optionCode">{{opt.optionText}}</option>
      </select>
      <select *ngIf="question.answerType.toUpperCase() === 'SELECTMULTI'" [id]="question.externalQuestionId" [formControlName]="question.externalQuestionId">
        <option *ngFor="let opt of question.answerOptions" [value]="opt.optionCode">{{opt.optionText}}</option>
      </select>
    </div>

    <div *ngSwitchCase="'CHECKBOX'" class="checkbox-question" [formArrayName]="question.externalQuestionId">
      <ng-container *ngFor="let option of question.answerOptions; let idx = index">
        <input [formControlName]="option.optionCode" [id]="question.externalQuestionId + ' ' + option.optionCode" type="checkbox"
          [value]="option.optionCode">
        <label for="{{question.externalQuestionId + ' ' + option.optionCode}}">{{option.optionText}}</label>
      </ng-container>
    </div>
  </div>
  <div class="errorMessage" *ngIf="!isValid">{{question.questionText}} is required</div>
</div>
<hr/>