Open insinfo opened 3 years ago
Not sure If I am correct, I also find it hard to understand on how to correctly implements custom value accessor.
Did you try to bind NgControl to you ValueAccessor ?
final NgControl ngControl;
ContentEditableDirective(this._element, @Self() @Optional() this.ngControl) {
ngControl?.valueAccessor = this;
}
void ngOnDestroy() {
ngControl?.valueAccessor = null;
}
The other possible solution would be to inject you value accessor like it's done for DefaultValueAccessor
I am having this problem even though I created the "ContentEditableDirective" directive and implementing the "ControlValueAccessor"
As can be seen below
EXCEPTION: Assertion failed: org-dartlang-app:///packages/angular_forms/src/directives/shared.dart:25:7 dir.valueAccessor != null "No value accessor for () or you may be missing formDirectives in your directives list." STACKTRACE: dart:sdk_internal 3983:15 assertFailed package:angular_forms/src/directives/shared.dart 25:28 setUpControl package:angular_forms/src/directives/ng_model.dart 120:5 ngOnInit package:legis/src/modules/editor/components/editable_item/editable_item.template.dart 90:25 detectChangesInternal package:angular/src/core/linker/views/component_view.dart 147:7 detectChanges package:legis/src/modules/editor/pages/editor_page.template.dart 227:22 detectChangesInternal package:angular/src/core/linker/views/embedded_view.dart 144:7 detectChanges package:angular/src/core/linker/view_container.dart 80:15 detectChangesInNestedViews package:legis/src/modules/editor/pages/editor_page.template.dart 187:19 detectChangesInternal package:angular/src/core/linker/views/embedded_view.dart 144:7 detectChanges package:angular/src/core/linker/view_container.dart 80:15 detectChangesInNestedViews package:legis/src/modules/editor/pages/editor_page.template.dart 126:20 detectChangesInternal package:angular/src/core/linker/views/component_view.dart 147:7 detectChanges package:legis/src/modules/editor/pages/editor_page.template.dart 261:24 detectChangesInternal package:angular/src/core/linker/views/host_view.dart 151:7 detectChanges package:angular_router/src/directives/router_outlet_directive.dart 124:19 <fn> dart:sdk_internal 21740:21 putIfAbsent package:angular_router/src/directives/router_outlet_directive.dart 119:30 prepare package:angular_router/src/router/router_impl.dart 302:32 _resolveStateForOutlet$ dart:sdk_internal 34437:33 <fn> package:angular/src/core/zone/ng_zone.dart 156:18 <fn> dart:sdk_internal 33552:14 runUnary package:angular/src/core/zone/ng_zone.dart 153:18 [_runUnary] dart:sdk_internal 29579:27 <fn> package:angular/src/core/zone/ng_zone.dart 129:11 <fn> package:angular/src/core/zone/ng_zone.dart 144:18 <fn> dart:sdk_internal 33544:14 run package:angular/src/core/zone/ng_zone.dart 141:18 [_run] dart:sdk_internal 30070:9 <fn>
- [x] Dart SDK version: 2.10.1 (stable) (Tue Oct 6 10:54:20 2020 +0200) on "windows_x64"
- [x] AngularDart Version ^6.0.0
- [x] Windows
- [x] Chrome
- [x] angular_forms: ^3.0.0
template
<p><span contenteditable [ngModel]="conteudo"></span></p>
component
import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import 'package:angular_router/angular_router.dart'; import 'package:legis/src/shared/directives/contenteditable_directive.dart'; @Component( selector: 'editable-item', styleUrls: [ 'editable_item.css', ], templateUrl: 'editable_item.html', directives: [ coreDirectives, ContentEditableDirective, formDirectives, routerDirectives, ], exports: []) class EditableItemComponent { String conteudo= 'test'; }
Directive
import 'dart:async'; import 'dart:html'; import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; @Directive( selector: '[contenteditable][ngControl],' '[contenteditable][ngFormControl],' '[contenteditable][ngModel]', ) class ContentEditableDirective implements ControlValueAccessor { StreamSubscription removeDisabledState; final HtmlElement _element; ContentEditableDirective(this._element) { } @HostListener('input') void handleChange() { onChange(_element.text, rawValue: _element.text); } /// Writes a new value to the element. /// This method will be called by the forms API to write /// to the view when programmatic (model -> view) changes are requested. /// See: [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor#members) @override void writeValue(value) { var normalizedValue = value ?? ''; _element.text = '$normalizedValue'; } /// This function is called by the forms API when the control status changes to or from "DISABLED". /// Depending on the value, it should enable or disable the appropriate DOM element. @override void onDisabledChanged(bool isDisabled) { if (isDisabled) { _element.setAttribute('disabled', 'true'); removeDisabledState = _element.onKeyDown.listen((e) => e.preventDefault()); } else { if (removeDisabledState != null) { _element.removeAttribute('disabled'); removeDisabledState.cancel(); } } } TouchFunction onTouched = () {}; @HostListener('blur') void touchHandler() { onTouched(); } /// Registers a callback function that should be called when the control receives a blur event. /// This is called by the forms API on initialization so it can update the form model on blur. @override void registerOnTouched(TouchFunction fn) { onTouched = fn; } ChangeFunction<String> onChange = (String _, {String rawValue}) {}; /// Registers a callback function that should be called when /// the control's value changes in the UI. /// /// This is called by the forms API on initialization so it can update /// the form model when values propagate from the view (view -> model). @override void registerOnChange(ChangeFunction<String> fn) { onChange = fn; } }
I am having this problem even though I created the "ContentEditableDirective" directive and implementing the "ControlValueAccessor"
As can be seen below
template
component
Directive