下面是我的Angular组件:

@Component( {
    selector: 'input-extra-field',
    template: `
            <div class="form-group" [formGroup]="formGroup" >
                <switch [attr.title]="field.etiquette" 
                    [attr.value]="field.valeur" [(ngModel)]="field.valeur"
                    [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
                </switch>
                <error-messages [control]="name"></error-messages>
            </div>
    `
} )

这是我的班级:

export class SwitchExtraField extends ExtraField {
    @Input() field: ExtraFormField;
    @Input() entity: { fields: Object };
    @Input() formGroup: FormGroup;

    constructor( formDir: NgForm ) {
        super( null, null, formDir );
    }

    get disabled(): string {
        if ( this.field && !!this.field.saisissable && !this.field.saisissable )     {
            return 'disabled';
        }
        return null;
    }
}

这是我编译时得到的错误:

ERROR Error: No value accessor for form control with unspecified name attribute
  at _throwError (forms.es5.js:1918)
  at setUpControl (forms.es5.js:1828)
  at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

当我改变元素开关输入它工作,知道我使用相同的结构到其他组件,它工作得很好。


当前回答

我在Angular 7中编写自定义表单控件组件时也收到过这个错误。然而,这些答案都不适用于Angular 7。

在我的例子中,需要将以下内容添加到@Component装饰器中:

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

这是一个“我不知道为什么它有效,但它确实有效”的案例。这要归咎于Angular糟糕的设计/实现。

其他回答

我还创建了一个自定义控件。 解决此问题的方法如下:

constructor(
  @Optional() @Self()
  readonly ngControl: NgControl,
) {
  this.ngControl.valueAccessor = this;
}

当我尝试集成angular编辑器时,我也面临着同样的问题

我通过添加[ngModelOptions]="{standalone: true}"到我的标签来解决这个问题。

<angular-editor [ngModelOptions]="{standalone: true}" [(ngModel)]="htmlContent" [config]="config"></angular-editor>

我希望这是最快的解决方案参考

在我的情况下,我有一个<TEXTAREA>标签从旧的html转换到angular。必须更改为<textarea>。

我在Jasmine的单元测试中得到了这个错误消息。我添加了ngDefaultControl属性自定义元素(在我的情况下,这是一个角度材料滑动切换),这解决了错误。

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

将上面的元素修改为包含ngDefaultControl属性

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>

在我的情况下,我使用指令,但没有导入它在我的模块。ts文件。Import修复了它。