如何在 contenteditable 元素中使用 ngControl？答案

【问题标题】：How can I use ngControl in contenteditable element?如何在 contenteditable 元素中使用 ngControl？
【发布时间】：2016-07-07 10:28:21
【问题描述】：

如何在contenteditable 元素中使用ngControl？例如，我想要：

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

通过绑定 (?) 将其绑定到模型驱动的“表单”（表格）。我使用基于模式的formBuilder 创建他，从服务器检索。
目前我认为这不起作用，因为<td>（和其他）元素没有属性value。那么，可以重载一些方法来使用textContent 属性吗？还是有其他方法可以做到这一点？

谢谢。

【问题讨论】：

标签： angular angular2-template angular2-forms

【解决方案1】：

为了能够将 contenteditable 元素与 Angular2 和控件一起使用，您需要创建一个适用于 contenteditable 的自定义指令该指令必须与 ngModel / ngForm 兼容，以便您能够使用像 @987654325 这样的指令@ 和 ngFormControl。在内部，该指令将注册一个自定义 `Value

这是一个可能的实现：

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/

【讨论】：