contenteditable要素でngControlを使用するにはどうすればよいですか？

Question

ngControlをcontenteditableの要素で使用するにはどうすればよいですか？ は例えば、私がしたい：（？）

<!-- *ngFor over rows and columns in table --> 
<td contenteditable="true" [ngControl]="row.number + column.number"></td> 

結合を使えば、モデル駆動型 "の形"（表）へ。私はformBuilderでスキーマに基づいて作成し、サーバーから取得します。
現在、私はそれが役に立たないと考えています。なぜなら、<td>（および他の）要素は、プロパティーvalueを持たないからです。次に、textContentのプロパティで動作するいくつかのメソッドをオーバーロードする可能性がありますか？またはこれを行うには他の方法がありますか？

ありがとうございます。

Answer 1

はAngular2とコントロールでcontenteditable要素を使用できるようにするには、あなたがngFormとngFormControlのようなディレクティブを使用することができますので、このディレクティブはngModel/ngForm適合するものでなければならないcontenteditableに適用されるカスタムディレクティブを作成する必要があります。

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => ContenteditableAccessor), multi: true})); 

@Directive({ 
    selector: '[contenteditable]', 
    host: {'(blur)': 'onBlur($event)'}, 
    providers: [CUSTOM_VALUE_ACCESSOR] 
}) 
export class ContenteditableAccessor implements ControlValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    constructor(private eltRef:ElementRef) { 
    } 

    ngOnInit() { 
    this.onChange(this.eltRef.nativeElement.innerText); 
    } 

    writeValue(value: any): void { 
    if (value!=null) { 
     this.eltRef.nativeElement.innerText = value; 
    } 
    } 

    onBlur(event) { 
    this.onChange(this.eltRef.nativeElement.innerText); 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
} 

あなたがコンポーネントにこのディレクティブをこのように使用することができます：内部的にこのディレクティブは、カスタム `バリュー

ここでは、可能な実装で登録されます

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <form> 
     <label>First name:</label> 
     <span contenteditable="true" [ngFormControl]="testCtrl">Some value</span> 
     </form> 
     <div> 
     firstName: {{testCtrl.value}}<br/> 
     firstName: {{testCtrl.valid}}<br/> 
     </div> 
     <div (click)="updateConditions()">Update conditions</div> 
    </div> 
    `, 
    directives: [ FORM_DIRECTIVES, ContenteditableAccessor ] 
}) 
export class AppComponent { 
    constructor() { 
    this.testCtrl = new Control(); 
    } 
} 

ここれます対応するplunkr：https://plnkr.co/edit/JbjXIa?p=preview。 ngForm/ngModel準拠したカスタムコンポーネントの詳細については

、あなたはセクション「NgModel互換コンポーネント」で、この記事を見て可能性：

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/