EXCEPTION: Assertion failed: org-dartlang-app:///packages/angular_forms/src/directives/shared.dart:25:7 dir.valueAccessor != null

[insinfo]

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>

• Dart SDK version: 2.10.1 (stable) (Tue Oct 6 10:54:20 2020 +0200) on "windows_x64"
• AngularDart Version ^6.0.0
• Windows
• Chrome
• 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;
  }
}

[lejard-h]

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

[bll55020674]

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>

• Dart SDK version: 2.10.1 (stable) (Tue Oct 6 10:54:20 2020 +0200) on "windows_x64"
• AngularDart Version ^6.0.0
• Windows
• Chrome
• 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;
  }
}