title: Error when using Control Value Accessor in Angular
body: <p>I have implemented Control Value Accessor in my application but when running the application I get the following error message: </p>
  
  <pre><code>ERROR TypeError: dir.valueAccessor.writeValue is not a function
      at setUpControl (forms.js:2578)
      at FormGroupDirective.addControl (forms.js:6318)
      at FormControlName._setUpControl (forms.js:6969)
      at FormControlName.ngOnChanges (forms.js:6892)
      at checkAndUpdateDirectiveInline (core.js:24499)
      at checkAndUpdateNodeInline (core.js:35163)
      at checkAndUpdateNode (core.js:35102)
      at debugCheckAndUpdateNode (core.js:36124)
      at debugCheckDirectivesFn (core.js:36067)
      at Object.eval [as updateDirectives] (AnnouncementInformationListComponent.html:82)
  </code></pre>
  
  <p>This is how I set it up:</p>
  
  <p>AnnouncementInformationListComponent.html</p>
  
  <pre><code>&lt;form [formGroup]="_form"&gt;
      &lt;div [formArrayName]="item.code"&gt;
              &lt;div *ngFor="let controlItem of _form.get(item.code).controls; let ctrlIndex = index"
                      class="form-row"
                      [formGroupName]="ctrlIndex"&gt;    
                  &lt;div [ngClass]="{'col-8': oneParameter(item), 'col-4': twoParameters(item), 'col-3': threeParameters(item)}"
                      *ngFor="let param of item.parameters; let arrIndex = index"&gt;
                      &lt;div [ngSwitch]="param"&gt;
  
                              &lt;input *ngSwitchCase="blabla(param)"
                                      type="text"
                                      class="form-control form-control-sm"
                                      formControlName="{{arrIndex}}"
                                      [placeholder]="getInputPlaceholder(item, arrIndex)"
                                      [ngbTypeahead]="search"
                                      placement="bottom-left"&gt;
  
                              &lt;div *ngSwitchCase="blablabla(param)"&gt;
                              Search
                              &lt;app-multi-select 
                                      [data]="data"
                                      [displaySmall]="true"
                                      [displayLabel]="false"
                                      [removeValueAfterEvent]="true"
                                      [useInForm]="true"
                                      (onSelectedItemEvent)="selectedItemEventHandler($event, item)"
                                      formControlName="{{arrIndex}}"&gt;
                              &lt;/app-multi-select&gt;
                              &lt;/div&gt;
  
                              &lt;div *ngSwitchDefault&gt;
                                      &lt;input type="text"
                                              class="form-control form-control-sm"
                                              formControlName="{{arrIndex}}"
                                              [placeholder]="getInputPlaceholder(item, arrIndex)"&gt;
                              &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button *ngIf="isblabla(item)" type="button" class="btn btn-secondary btn-sm col-2" (click)="onClickEvent(controlItem.value, item, ctrlIndex)" container="body" tooltip="blabla"&gt;
                      &lt;span &gt;
                          &lt;fa-icon icon="arrows-alt-h" [styles]="{'stroke': 'white', 'color': 'white'}"&gt;&lt;/fa-icon&gt;  
                      &lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ng-container
                          *ngTemplateOutlet="arrayItemButtonsTmpl; context: {item:item, ctrlIndex:ctrlIndex, arrayLength: _form.get(item.code).controls.length}"&gt;
                  &lt;/ng-container&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>multi-select.component.ts</p>
  
  <pre><code>@Component({
    selector: 'app-multi-select',
    templateUrl: './multi-select.component.html',
    styleUrls: ['./multi-select.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; AnnouncementInformationListComponent),
        multi: true
      }
    ]
  })
  </code></pre>
  
  <p>multi-select.component.ts</p>
  
  <pre><code>export class MultiSelectComponent implements OnInit, ControlValueAccessor {
  
    value: string;
  </code></pre>
  
  <p>multi-select.component.ts</p>
  
  <pre><code>writeValue(value: string): void {
      this.value = value ? value : ''
    }
    registerOnChange(fn: any): void {
    }
    registerOnTouched(fn: any): void {
    }
    setDisabledState?(isDisabled: boolean): void {
    }
  </code></pre>
  
  <p>Worth noting is that all the other input fields in AnnouncementInformationListComponent.html (which are not using Control Value Accessor) are working just fine. Also, when I google the error message I have problem finding other people who have had the same issue, which I found odd. Any ideas what the problem might be?</p>