Как использовать [(ngModel)] для содержимого div в angular2?

NgModel ожидает, что связанный элемент будет иметь свойство value, которого нет у divs. Вот почему вы получаете ошибку No value accessor.

Вы можете настроить собственное эквивалентное свойство и привязку данных событий, используя свойство textContent (вместо value) и событие input:

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

Plunker

Я не знаю, поддерживается ли событие input во всех браузерах для contenteditable. Вместо этого вы всегда можете привязаться к какому-либо событию клавиатуры.

Обновленный ответ (09.10.2017):

Теперь у меня есть модуль ng-contenteditable. Его совместимость с угловыми формами.

Старый ответ (11.05.2017). В моем случае я могу просто сделать:

<div
  contenteditable="true"
  (input)="post.postTitle = $event.target.innerText"
  >{{ postTitle }}</div>

Где post - это объект со свойством postTitle.

В первый раз, после ngOnInit() и получения post из бэкэнда, я установил this.postTitle = post.postTitle в своем компоненте.

Рабочий Plunkr здесь http://plnkr.co/edit/j9fDFc, но соответствующий код ниже.

Привязка и ручное обновление textContent у меня не работало, оно не обрабатывает разрывы строк (в Chrome при вводе текста после разрыва строки курсор возвращается в начало), но я смог заставить его работать с помощью директивы contenteditable модели из https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/.

Я настроил его для обработки многострочного простого текста (с \ns, а не <br>s) с помощью white-space: pre-wrap и обновил его, чтобы использовать keyup вместо blur. Обратите внимание, что некоторые решения этой проблемы используют событие input, которое пока не поддерживается в IE или Edge для элементов contenteditable.

Вот код:

Директива:

import {Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges} from 'angular2/core';

@Directive({
  selector: '[contenteditableModel]',
  host: {
    '(keyup)': 'onKeyup()'
  }
})
export class ContenteditableModel {
  @Input('contenteditableModel') model: string;
  @Output('contenteditableModelChange') update = new EventEmitter();

  /**
   * By updating this property on keyup, and checking against it during
   * ngOnChanges, we can rule out change events fired by our own onKeyup.
   * Ideally we would not have to check against the whole string on every
   * change, could possibly store a flag during onKeyup and test against that
   * flag in ngOnChanges, but implementation details of Angular change detection
   * cycle might make this not work in some edge cases?
   */
  private lastViewModel: string;

  constructor(private elRef: ElementRef) {
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['model'] && changes['model'].currentValue !== this.lastViewModel) {
      this.lastViewModel = this.model;
      this.refreshView();
    }
  }

  /** This should probably be debounced. */
  onKeyup() {
    var value = this.elRef.nativeElement.innerText;
    this.lastViewModel = value;
    this.update.emit(value);
  }

  private refreshView() {
    this.elRef.nativeElement.innerText = this.model
  }
}

Использование:

import {Component} from 'angular2/core'
import {ContenteditableModel} from './contenteditable-model'

@Component({
  selector: 'my-app',
  providers: [],
  directives: [ContenteditableModel],
  styles: [
    `div {
      white-space: pre-wrap;

      /* just for looks: */
      border: 1px solid coral;
      width: 200px;
      min-height: 100px;
      margin-bottom: 20px;
    }`
  ],
  template: `
    <b>contenteditable:</b>
    <div contenteditable="true" [(contenteditableModel)]="text"></div>

    <b>Output:</b>
    <div>{{text}}</div>

    <b>Input:</b><br>
    <button (click)="text='Success!'">Set model to "Success!"</button>
  `
})
export class App {
  text: string;

  constructor() {
    this.text = "This works\nwith multiple\n\nlines"
  }
}

Пока что тестировалось только в Chrome и FF на Linux.

Вот другая версия, основанная на ответе @ tobek, который также поддерживает HTML и вставку:

import {
  Directive, ElementRef, Input, Output, EventEmitter, SimpleChanges, OnChanges,
  HostListener, Sanitizer, SecurityContext
} from '@angular/core';

@Directive({
  selector: '[contenteditableModel]'
})
export class ContenteditableDirective implements OnChanges {
  /** Model */
  @Input() contenteditableModel: string;
  @Output() contenteditableModelChange?= new EventEmitter();
  /** Allow (sanitized) html */
  @Input() contenteditableHtml?: boolean = false;

  constructor(
    private elRef: ElementRef,
    private sanitizer: Sanitizer
  ) { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['contenteditableModel']) {
      // On init: if contenteditableModel is empty, read from DOM in case the element has content
      if (changes['contenteditableModel'].isFirstChange() && !this.contenteditableModel) {
        this.onInput(true);
      }
      this.refreshView();
    }
  }

  @HostListener('input') // input event would be sufficient, but isn't supported by IE
  @HostListener('blur')  // additional fallback
  @HostListener('keyup') onInput(trim = false) {
    let value = this.elRef.nativeElement[this.getProperty()];
    if (trim) {
      value = value.replace(/^[\n\s]+/, '');
      value = value.replace(/[\n\s]+$/, '');
    }
    this.contenteditableModelChange.emit(value);
  }

  @HostListener('paste') onPaste() {
    this.onInput();
    if (!this.contenteditableHtml) {
      // For text-only contenteditable, remove pasted HTML.
      // 1 tick wait is required for DOM update
      setTimeout(() => {
        if (this.elRef.nativeElement.innerHTML !== this.elRef.nativeElement.innerText) {
          this.elRef.nativeElement.innerHTML = this.elRef.nativeElement.innerText;
        }
      });
    }
  }

  private refreshView() {
    const newContent = this.sanitize(this.contenteditableModel);
    // Only refresh if content changed to avoid cursor loss
    // (as ngOnChanges can be triggered an additional time by onInput())
    if (newContent !== this.elRef.nativeElement[this.getProperty()]) {
      this.elRef.nativeElement[this.getProperty()] = newContent;
    }
  }

  private getProperty(): string {
    return this.contenteditableHtml ? 'innerHTML' : 'innerText';
  }

  private sanitize(content: string): string {
    return this.contenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
  }
}

Я повозился с этими решениями и сейчас буду использовать в своем проекте следующее решение:

<div #topicTitle contenteditable="true" [textContent]="model" (input)="model=topicTitle.innerText"></div>

Я предпочитаю использовать ссылочную переменную шаблона вместо "$ event".

Связанная ссылка: https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable.

В contenteditable я добился двусторонней привязки с помощью события blur и атрибута innerHTML.

в .html:

<div placeholder="Write your message.."(blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

In .ts:

getContent(innerText){
  this.content = innerText;
}

Вот простое решение, если то, что вы привязываете, является строкой, никаких событий не требуется. Просто поместите текстовое поле в ячейку таблицы и выполните привязку к нему. Затем отформатируйте текстовое поле до прозрачного

HTML:

<tr *ngFor="let x of tableList">
    <td>
        <input type="text" [(ngModel)]="x.value" [ngModelOptions]="{standalone: true}">
    </td>
</tr>

Для меня было достаточно использовать javascript без объекта ts. HTML:

 <div
        id="custom-input"
        placeholder="Schreiben..."
</div>

TS:

• чтобы получить входное значение: document.getElementById("custom-input").innerHTML

• для установки входного значения: document.getElementById("custom-input").innerHTML = "myValue"

И все работает отлично. Мне пришлось использовать div вместо ionic ion-textarea, потому что у меня были проблемы с автоматическим изменением размера. С ion-textarea я смог сделать авторазмер только с помощью js. Теперь я делаю автоматическое изменение размера с помощью CSS, что, на мой взгляд, лучше.