Click here to Skip to main content
15,943,335 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have 3 quill editors, that I loop and whenever I type in one of those 3, the other 2 will automatically follow. How do I make each editor has its own values? I'm putting it in finalAnswer.

This is my subjective.component.ts
JavaScript
public AnswerSeason: any[] = [];


JavaScript
exampage(event, n: number) {
    localStorage.setItem('examnumber', JSON.stringify(n));
    this.status = true;
    this.examlisting = JSON.parse(localStorage.getItem('ExamList'));
    let x = this.examlisting;
    // Convert the string back to an object
    let url = x[n - 1];
    if (url['flag'] != 2) {
        url['flag'] = 1; // no answer;
        this.AnswerSeason = null; // or false or ''
        localStorage.setItem('ExamList', JSON.stringify(x));
        this.service.updateAnswer(url).subscribe(data => {
            if (data['status']) {

            }
        })
    }
    this.AnswerSeason = url['Finalanswer'];
    this.number = n;
    this.q = x[n - 1];
    return true;
    // this.ngOnInit();
}


JavaScript
answers(ans, id, num) {
    // alert(num);
    this.examlisting = JSON.parse(localStorage.getItem('ExamList'));
    let x = this.examlisting;
    let url = x[num - 1];
    if (ans == null) {
        let lang = JSON.parse(localStorage.getItem('lang'));
        let alertFail = '';
        if (lang == 'bm') {
            alertFail = "Sila pilih jawapan anda";
        } else {
            alertFail = "Please select your answer";
        }
        this.alert.confirm({ message: alertFail, alert: 'fail' })
    } else {
        url['flag'] = 2; // no answer
        url['Finalanswer'] = this.AnswerSeason;
        localStorage.setItem('ExamList', JSON.stringify(x));
        this.exampage('', num + 1);
        // if (num == 100) {
        //     this.exampage('', 100);
        // } else {
        //     this.exampage('', num + 1);
        // }
        this.service.updateAnswer(url).subscribe(data => {
            if (data['status']) {

            }
        })
    }
}


This is my subjective.component.html
HTML
<div *ngIf="q.type === 'multiple'" class="pt-3">
    <img *ngIf="q.image" [src]="q?.image" style="display:block; margin-right:auto; margin-left:auto; margin-bottom:10px;">
    <p class="text-dark-75 font-size-lg font-weight-normal mb-4" [innerHtml]="q?.question | newline"></p>

    <div *ngFor="let sq of q?.subquestion">
        <p [innerHtml]="sq | newline"></p>

        <quill-editor [(ngModel)]="AnswerSeason" theme="snow" [style]="{'margin-bottom': '15px', 'max-height': '150px', 'overflow': 'scroll'}">
            <div quill-editor-toolbar>
                <span class="ql-formats">
                    <button type="button" class="ql-bold">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>

                    <button type="button" class="ql-italic">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>

                    <button type="button" class="ql-underline">
                        <svg viewBox="0 0 18 18">
                            <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
                            <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
                        </svg>
                    </button>
                </span>
            </div>
        </quill-editor>
    </div>
</div>


the preview is like this:

1. who am I?
[..........]

2. who are you?
[..........]

3. who are we?
[..........]

and when I type in one of the editors, the other follow too.

1. who am I?
[ABC.......]

2. who are you?
[ABC.......]

3. who are we?
[ABC.......]

What I have tried:

I've tried these

1. public AnswerSeason: any;
2. let i = index
3. [(ngModel)]="AnswerSeason[i]"

but not working, maybe I miss something?
Posted
Updated 15-Jun-21 13:27pm

1 solution

You have mapped all three textboxes to the same variable. Map them to different ones

[(ngModel)]="AnswerSeason"


Have an array and access that here
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900