How to store array value in database with angular 5

Question

In my code option array dosen't work and when i try to bind it with ngModel it didn't work for me and give me 400 bad request. I am include my code here

Here is my 2 model Question model and option model

Question.ts

import { Option } from '../models/option';

export class Question {
id: number;
name: string;
options: Option[] = new Array(4);

constructor(data = null) {
    if (data) {
        this.id = data.id;
        this.name = data.name;
        this.options = data.options; 
    }  
}
}

Option.ts

export class Option {
id: number;
questionId: number;
option: string;
isAnswer : boolean;


constructor(data = null) {
    if(data){
        this.id = data.id;
        this.questionId = data.questionId;
        this.option = data.option;
        this.isAnswer = data.isAnswer;
    }
}
}

Here i am include exam.component.ts code

class FormExam {
id: number;
name: string;
options: Option[] = new Array(4);

static formexam(question: Question) {
    let instance = new this;
    instance.id = question.id;
    instance.name = question.name;
    instance.options = question.options;

    return instance;
}

toTask(question: Question) {
    question.id = this.id;
    question.name = this.name;
    question.options = this.options;

    return question;
}
}

export class ExamComponent implements OnInit {
@Input() question: Question;

@Output() onSubmit = new EventEmitter();

userModel: User;
form: FormGroup;

dialogHeader2: string;
isNewTask: boolean;
filterStr: string = '';
isRequestLoading: boolean;
isValidateLoading: boolean;
model: FormExam;
showNameError: boolean;
stateModel: any;
stateText: string;
submitButtonText2: string;
questionModel: Question;


 ngOnInit() {
    let task = this.question;
    this.isNewTask = !task;
    this.question = task ? task : new Question();
    this.submitButtonText2 = this.question.id ? 'Save' : 'Create';
    this.model = FormExam.formexam(this.question);

}

Here is html code and in this code when i am using [(ngModel)] in option and isAnswer didn't work for me .

<div class="ct-form-block">
    <div>
        <label class="ct-form-label">Question</label>
        <ct-textarea [name]="'name'" [maxlength]="200" [(ngModel)]="model.name">  </ct-textarea>

    </div>

    <div *ngFor="let option of model.options;">

        <label class="ct-form-label"> Options</label>
        <div class="ct-required-field-container ">
            <input class="ct-input ct-full-width2"
                   name="options" [(ngModel)]="option.option"/>

            <input type="checkbox" name="Options" [(ngModel)]="option.isAnswer" />

        </div>
    </div>
</div>

in this code model.option and model.isAnswer dosen't work because when i am submit this code it gives me bad request 400 error so is there any other way to store this value in database .

Answer 1

The following:

<input type="checkbox" name="Options" [(ngModel)]="model.isAnswer" />

Shouldn't this be (what your loop iterates over):

<input type="checkbox" name="Options" [(ngModel)]="option.isAnswer" />