下面是我的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)

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


当前回答

如果你试图将ngModel添加到非输入元素中,比如<option> HTML标签,也会出现这个错误。确保你只把ngModel添加到<input>标签。 在我的例子中,我已经添加了一个ngModel到<ion-select-option>而不是<ion-select>。

其他回答

在我的情况下,这就像在我的app.module.ts声明中为DI注册了新组件而不是在exports中一样愚蠢。

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

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

我也犯了同样的错误,只需要在module.ts中导入表单模块

import { FormsModule } from '@angular/forms';
    
@NgModule({
    imports: [FormsModule]
)}

我在运行Karma单元测试用例时遇到了这个错误 在导入中添加MatSelectModule可以解决这个问题

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

我通过在带有[(ngModel)]属性的元素中添加name="fieldName" ngDefaultControl属性来修正这个错误。