How to use [(ngModel)] on div's contenteditable in angular2?

Question

I am trying to use ngModel to two way bind div's contenteditable input content as follows:

<div id="replyiput" class="btn-input"  [(ngModel)]="replyContent"  contenteditable="true" data-text="type..." style="outline: none;"    ></div> 

but it is not working and an error occurs:

EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''

Answer 1

NgModel expects the bound element to have a value property, which divs don't have. That's why you get the No value accessor error.

You can set up your own equivalent property and event databinding using the textContent property (instead of value) and the input event:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `{{ title }}
        <div contenteditable="true" [textContent]="model" (input)="model = $event.target.textContent"></div>
        <p>{{ model }}</p>`
})
export class AppComponent {
    title = "Angular 2 RC.4";
    model = "some text";
    constructor() {
        console.clear();
    }
}

Plunker

I don't know if the input event is supported on all browsers for contenteditable. You could always bind to some keyboard event instead.