Ошибка: нет доступа к значению для управления формой с именем: 'answer'

Question

У меня есть следующее html. Я хочу добавить ace.js редактор в мой код и сопоставить значение в Редакторе с полем answer поля 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>

Соответствующее form равно

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

Когда я запускаю код, я получаю ошибку Error: No value accessor for form control with name: 'answer', соответствующую html коду <div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>

Что я делаю не так?