错误:在switch上没有指定name属性的窗体控件的值访问器

下面是我的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)]到我的mat-form-field而不是input元素。

2019-07-02 19:47:07

其他回答

我还收到了这个错误，当我命名我的一个组件输入'formControl'。可能是留给别的东西用的。如果你想在组件之间传递FormControl对象，可以这样使用:

@Input() control: FormControl;

不是这样的:

@Input() formControl: FormControl;

奇怪-但有效:)

2020-12-11 14:30:11

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

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

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

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

2019-02-18 21:31:40

当你在一个不能有<div>这样值的元素上使用ngModel或formControl时，就会发生这种情况。

当ngModel或formControl像这样使用时会出现问题:

<div [(ngModel)]="myModel"> <--- wrong place
    <input type="text" />
</div>

解决方案:

<div>
    <input type="text" [(ngModel)]="myModel" /> <--- correct place
</div>

来源:https://github.com/angular/angular/issues/43821 # issuecomment - 992305494

2022-06-08 14:47:47

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

我有INPUT_VALUE_ACCESSOR创建为:

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

2021-02-07 19:46:41

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

2021-01-06 08:48:48

错误:在switch上没有指定name属性的窗体控件的值访问器

推荐文章

最新文章

标签