NgModelを使用して、次のようにdivのcontenteditable入力コンテンツを双方向でバインドしようとしています。
<div id="replyiput" class="btn-input" [(ngModel)]="replyContent" contenteditable="true" data-text="type..." style="outline: none;" ></div>
しかし、それは機能しておらず、エラーが発生します:
EXCEPTION: No value accessor for '' in [ddd in PostContent@64:141]
app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for ''
NgModel
は、バインドされた要素にvalue
プロパティがあり、div
sにはないことを想定しています。だからこそ、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(); }
}
input
イベントがcontenteditable
のすべてのブラウザーでサポートされているかどうかわかりません。代わりに、常にキーボードイベントにバインドできます。
更新された回答(2017-10-09):
これで ng-contenteditable モジュールができました。 Angularフォームとの互換性。
古い回答(2017-05-11):私の場合、簡単にできます:
_<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では、改行がカーソルを先頭にジャンプした後に入力します)が、 https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/ からのcontenteditableモデルディレクティブ。
\n
を使用して複数行のプレーンテキスト(<br>
sではなくwhite-space: pre-wrap
s)を処理するように調整し、keyup
の代わりにblur
を使用するように更新しました。この問題の一部のソリューションは、IEまたはEdge on input
要素でまだサポートされていない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"
}
}
これまでのところ、Linux上のChromeおよびFFでのみテストされています。
これは、@ 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
バインドするものが文字列であり、イベントが不要な場合の簡単なソリューションを次に示します。テーブルセル内にテキストボックス入力を配置し、それにバインドするだけです。次に、テキストボックスを透明に書式設定します
HTML:
<tr *ngFor="let x of tableList">
<td>
<input type="text" [(ngModel)]="x.value" [ngModelOptions]="{standalone: true}">
</td>
</tr>