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

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


当前回答

在我的情况下,问题是我创建了一个@Input变量与保留名称formControl。

其他回答

在我的情况下,我忘记添加提供商:[INPUT_VALUE_ACCESSOR]到我的自定义组件

我有INPUT_VALUE_ACCESSOR创建为:

export const INPUT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextEditorComponent),
  multi: true,
};

它看起来像“formControl”是Angular表单的保留名称,当我使用这个名称作为组件的输入时,我在实际的from控件中得到了意想不到的行为。如果你问我,我会说这是Angular的一个bug。只需将您的输入名称替换为“frmCtrl”或其他东西,它就会工作。

在我的情况下,问题是我创建了一个@Input变量与保留名称formControl。

你有没有试过移动你的[(ngModel)]到div而不是在你的HTML开关?我在我的代码中出现了同样的错误,这是因为我将模型绑定到<mat-option>而不是<mat-select>。虽然我没有使用表单控件。

我有同样的错误,我在我的自定义表单组件中有一个名为control的输入字段,但无意中传递了名为formControl的输入控件。希望没有人面临这样的问题。