2016-03-21 26 views
3

contenteditable öğesinde ngControl öğesini nasıl kullanabilirim? Örneğin, ben istiyorum:ngControl'ü contenteditable öğede nasıl kullanabilirim?

bağlayıcı o dayalı model için "form" (masa) ile
<!-- *ngFor over rows and columns in table --> 
<td contenteditable="true" [ngControl]="row.number + column.number"></td> 

(?). Şemaya göre sunucudan alınan formBuilder ile onu yaratıyorum.
Şu anda çalışmaz, '<td> (ve diğerleri) öğesinin özelliği value değil. Daha sonra textContent özelliği ile çalışmak için bazı yöntemleri aşırı yüklemek mümkün mü? Ya da bunu yapmanın başka bir yolu var mı?

Teşekkür ederiz.

cevap

3

Angular2 ve kontrollerle contenteditable unsurları kullanmak edebilmek için, size ngForm ve ngFormControl gibi direktifler kullanmak mümkün olacak böylece Bu yönerge ngModel/ngForm uyumlu olmalıdır contenteditable için geçerlidir özel yönergesi oluşturmanız gerekir.

bir bileşenin bu şekilde bu yönergeyi kullanmak mümkün olacak

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; } 
} 
: Burada

@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(); 
    } 
} 

olduğunu Dahili olarak bu yönerge İşte

olası bir uygulamasıdır özel bir `Değer kaydedecektir karşılık gelen plunkr: https://plnkr.co/edit/JbjXIa?p=preview.

: ngForm/ngModel uyumlu özel bileşenleri hakkında daha detaylı bilgi için

, bu "NgModel uyumlu bileşen" bu makaleye göz olabilir

İlgili konular