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