Error: No value accessor for form control with name: 'answer'

Question

I have the following html. I want to add ace.js editor in my code and map the value in the Editor to answer field of the a form

  <div class="form-group" id="answer-div">
    <div class="label-div">
      <label class="control-label"><strong>Answer</strong></label>
    </div>
    <div  id="add-more-answer-div" class="two-column-grid">
      <div id="answer-filename-div">
        <label id="filename-label" for="answer-filename">Name</label>
        <input type="text" id="answer-filename">
        <button type="button" id="more-answer-button" class="unselected-button">Add More Sections</button>
      </div>
    </div>

    <div class="control-div" id="editor-div">
      <div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>
      <app-show-errors [control]="practiceQuestionForm.controls.answer"></app-show-errors>
    </div>
  </div>

The corresponding form is

    this.practiceQuestionForm = this.fb.group({
...
      answer:[null,Validators.required],
....
    })

When I run the code, I get the error Error: No value accessor for form control with name: 'answer' corresponding to html code <div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>

What am I doing wrong?

maybe you are right. checking this - https://stackoverflow.com/questions/50988119/formcontrolname-to-be-used-for-div — Manu Chadha, Feb 08 '20 at 20:08
I don't get the error anymore if I put a `textarea` within `div` but I still have to check if this will work well w.r.t mapping the `textarea` with `form's` field `
Remove this and enter code here
` — Manu Chadha, Feb 08 '20 at 20:10
textarea is kind of like an input field so you can use reactive forms for that maybe. — Ramesh Reddy, Feb 08 '20 at 20:12

Error: No value accessor for form control with name: 'answer'

0 Answers0