A gist to dynamically add a form for multi-choice multi-select questions. Please suggest improvements.

quiz.interface.ts

export interface Quiz {
    id: number;
    questionText: string;
    isAnswered: boolean;
    options: { id: number, optionText: string } []
}

quiz.page.html

<ion-header>
  <ion-navbar color='primary' no-border-bottom>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Quizzes</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <div *ngIf="quizForm">
    <form [formGroup]="quizForm">
      <div formArrayName="allQuizzes">
        <div *ngFor="let question of allQuizzes; let i = index" [formGroupName]="i" padding-bottom>
          <ion-row>
            <ion-col col-11>
              <h5>{{ question.questionText }}</h5>
              <ng-container>
                <ion-list formArrayName="answer_ids">
                  <div *ngFor="let choice of question.options; let j = index">
                    <ion-item>
                      <ion-label style="white-space: normal;">{{ choice.optionText }}</ion-label>
                      <ion-checkbox [disabled]='question.isAnswered' (ionChange)="onChange(choice.id, $event.checked, i)" value="choice.id"></ion-checkbox>
                    </ion-item>
                  </div>
                </ion-list>
              </ng-container>
            </ion-col>
          </ion-row>
          <button col-11 ion-button block outline class='submit-btn' [disabled]='question.isAnswered' (click)='onSubmit(i)'> Submit </button>
        </div>
      </div>
    </form>
  </div>

</ion-content>

quiz.page.ts

import { Quiz } from './../../models/quiz.interface';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { MOCK_QUIZZES } from '../../mocks/quizzes.mock';

@IonicPage()
@Component({
  selector: 'page-quiz',
  templateUrl: 'quiz.page.html',
})
export class QuizPage {

  allQuizzes: Quiz[] = [];
  quizForm: any;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private formBuilder:FormBuilder) {
    this.allQuizzes = MOCK_QUIZZES;
    this.quizForm = this.formBuilder.group({
      allQuizzes: formBuilder.array([])
    })

    this.initiateForm();
    
  }

  private initiateForm() {
    for (var i = 0; i < this.allQuizzes.length; i++) {
      // get multiple
      this.addNewQuiz(i);
    }
  }

  private addNewQuiz(i: number) {
    let question = this.formBuilder.group({
      question_id: [this.allQuizzes[i].id, Validators.required],
      answer_ids: this.formBuilder.array([]),
      isAnswered: [this.allQuizzes[i].isAnswered, Validators.required]
    });
    this.quizForm.controls['allQuizzes'].push(question);
  }


  private onChange(id, isChecked, index) {
    const answers = <FormArray>this.quizForm.controls.allQuizzes.controls[index].controls.answer_ids;
    
    if(isChecked) {
      answers.push(new FormControl(id))
    } else {
      let idx = answers.controls.findIndex(x => x.value == id)
      answers.removeAt(idx)
    }
  }
  
  private onSubmit(questionId){
    if (this.quizForm.value.allQuizzes[questionId].answer_ids.length != 0){
      this.allQuizzes[questionId].isAnswered = true;
      this.quizForm.value.allQuizzes[questionId].isAnswered = true;
    }
    console.log(this.quizForm.value.allQuizzes[questionId]);
  }

}

quizzes.mock.ts

import { Quiz } from './../models/quiz.interface';
export const MOCK_QUIZZES: Quiz[] = [
    {
        id:1,
        questionText:'Question 1',
        isAnswered: false, 
        options:[
            {
                id:1,
                optionText: 'Option 1'
            },
            {
                id:2,
                optionText: 'Option 2'
            },
            {
                id:3,
                optionText: 'Option 3'
            }
        ]
    },
    {
        id:2,
        questionText:'Question 2',
        isAnswered: false,
        options:[
            {
                id:4,
                optionText: 'Option 1'
            },
            {
                id:5,
                optionText: 'Option 2'
            },
            {
                id:6,
                optionText: 'Option 3'
            },
            {
                id:7,
                optionText: 'Option 4'
            },
            {
                id:8,
                optionText: 'Option 5'
            },
            {
                id:9,
                optionText: 'Option 6'
            }
        ]
    }
]