Question

我已经在我的应用程序中实现了Control Value Accessor，但是在运行该应用程序时，出现以下错误消息：

-----BEGIN PUBLIC KEY-----
[B@34340fab
-----END PUBLIC KEY-----
-----BEGIN PRIVATE KEY-----
[B@2aafb23c
-----END PRIVATE KEY-----

这是我的设置方式：

AnnouncementInformationListComponent.html

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)

multi-select.component.ts

<form [formGroup]="_form">
    <div [formArrayName]="item.code">
            <div *ngFor="let controlItem of _form.get(item.code).controls; let ctrlIndex = index"
                    class="form-row"
                    [formGroupName]="ctrlIndex">    
                <div [ngClass]="{'col-8': oneParameter(item), 'col-4': twoParameters(item), 'col-3': threeParameters(item)}"
                    *ngFor="let param of item.parameters; let arrIndex = index">
                    <div [ngSwitch]="param">

                            <input *ngSwitchCase="blabla(param)"
                                    type="text"
                                    class="form-control form-control-sm"
                                    formControlName="{{arrIndex}}"
                                    [placeholder]="getInputPlaceholder(item, arrIndex)"
                                    [ngbTypeahead]="search"
                                    placement="bottom-left">

                            <div *ngSwitchCase="blablabla(param)">
                            Search
                            <app-multi-select 
                                    [data]="data"
                                    [displaySmall]="true"
                                    [displayLabel]="false"
                                    [removeValueAfterEvent]="true"
                                    [useInForm]="true"
                                    (onSelectedItemEvent)="selectedItemEventHandler($event, item)"
                                    formControlName="{{arrIndex}}">
                            </app-multi-select>
                            </div>

                            <div *ngSwitchDefault>
                                    <input type="text"
                                            class="form-control form-control-sm"
                                            formControlName="{{arrIndex}}"
                                            [placeholder]="getInputPlaceholder(item, arrIndex)">
                            </div>
                </div>
                <button *ngIf="isblabla(item)" type="button" class="btn btn-secondary btn-sm col-2" (click)="onClickEvent(controlItem.value, item, ctrlIndex)" container="body" tooltip="blabla">
                    <span >
                        <fa-icon icon="arrows-alt-h" [styles]="{'stroke': 'white', 'color': 'white'}"></fa-icon>  
                    </span>
                </button>
                <ng-container
                        *ngTemplateOutlet="arrayItemButtonsTmpl; context: {item:item, ctrlIndex:ctrlIndex, arrayLength: _form.get(item.code).controls.length}">
                </ng-container>
        </div>
    </div>
</form>

multi-select.component.ts

@Component({
  selector: 'app-multi-select',
  templateUrl: './multi-select.component.html',
  styleUrls: ['./multi-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AnnouncementInformationListComponent),
      multi: true
    }
  ]
})

multi-select.component.ts

export class MultiSelectComponent implements OnInit, ControlValueAccessor {

  value: string;

值得注意的是，AnnouncementInformationListComponent.html中的所有其他输入字段（未使用控件值访问器）都可以正常工作。另外，当我搜索错误消息时，我在寻找其他遇到相同问题的人时遇到了问题，我觉得很奇怪。任何想法可能是什么问题？

Answer 1

Angular试图在您的AnnouncementInformationListComponent中找到 writeValue 函数，因为您已将其声明为对MultiSelectComponent提供程序数组的引用。

将您的提供者更改为：

@Component({
  selector: 'app-multi-select',
  templateUrl: './multi-select.component.html',
  styleUrls: ['./multi-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MultiSelectComponent),
      multi: true
    }
  ]
})

在Angular中使用控件值访问器时出错

1 个答案: