Question

我是angular4的新手，这是我的组件：

@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)

当我将元素开关更改为输入时，它知道我使用与其他组件相同的结构并且工作正常。

谢谢。

Answer 1

我通过将name="fieldName" ngDefaultControl属性添加到带有[(ngModel)]属性的元素来修复此错误。

Answer 2

就我而言，我忘记将 providers: [INPUT_VALUE_ACCESSOR] 添加到我的自定义组件

我将 INPUT_VALUE_ACCESSOR 创建为：

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

Answer 3

我遇到了同样的问题，问题是我的子组件有一个名为formControl的输入。

所以我只需要更改：

<my-component [formControl]="formControl"><my-component/>

收件人：

<my-component [control]="control"><my-component/>

ts：

@Input()
control:FormControl;

Answer 4

在Angular 7中编写自定义表单控件组件时，我也收到此错误。但是，所有答案都不适用于Angular 7。

就我而言，需要将以下内容添加到@Component装饰器中：

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

这种情况是“我不知道为什么会起作用，但是会起作用。”总结一下Angular的不良设计/实现。

Answer 5

就我而言，问题是我创建了一个保留名称为 @Input 的 formControl 变量。

Answer 6

如果您尝试将 ngModel 添加到非输入元素（如 <option> HTML 标签），也会发生此错误。确保仅将 ngModel 添加到 <input> 标签。就我而言，我已将 ngModel 添加到 <ion-select-option> 而不是 <ion-select>。

Answer 7

我也有同样的错误，角度为7

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

我刚刚添加了 ngDefaultControl

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Answer 8

就我而言，我在标签而非输入上插入了[[ngModel）]。还有一个警告，我尝试在指定的行中正确地执行上述错误后运行，但该错误不会消失。如果您在其他地方犯了相同的错误，它仍然会在同一行中向您抛出相同的错误

Answer 9

就我而言，这就像在我的app.module.ts声明中为DI注册新组件而在出口中不是注册了DI的新组件一样。

Answer 10

就我而言，这是在我的共享模块中发生的，我必须在@NgModule中添加以下内容：

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

Answer 11

我在这样的 mat-select 中使用了 formControl：

<mat-select [formControl]="control">
 ...
</mat-select>

然后我意识到没有在规范文件中导入 MatSelectModule，这解决了这个问题。

Answer 12

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

if(cookievoice === voices[i].name) {
    option.setAttribute('selected', 'selected');
   selectedIndex = i;
}

Answer 13

这是一种愚蠢的做法，但是我偶然使用[formControl]而不是[formGroup]收到了此错误消息。看到这里：

错误

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup">
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

右

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formGroup]="formGroup">
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

Answer 14

您是否尝试过将[(ngModel)]而不是HTML中的div移到switch？我的代码中出现了相同的错误，这是因为我将模型绑定到了<mat-option>而不是<mat-select>上。虽然我没有使用表单控件。

Answer 15

在我的情况下，这是一个例如不存在的component.member。

[formControl]="personId"

将其添加到固定的类声明中

this.personId = new FormControl(...)

Answer 16

我在使用Jasmine进行单元测试时收到了此错误消息。我在自定义元素中添加了 ngDefaultControl 属性（在我的情况下，这是一个有角度的材质滑动切换），可以解决该错误。

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

更改上述元素以包括 ngDefaultControl 属性

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

Answer 17

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

Answer 18

就我而言，该错误是通过在模块中复制组件的导入而触发的。

Answer 19

#Background

NativeScript 6.0

在我的情况下，错误是通过将元素标签从更改为错误触发的。在

删除[（ngModel）] =“ name”错误后。

Answer 20

我在运行单元测试时遇到了这个问题。为了解决此问题，我将MatSlideToggleModule添加到了spect.ts文件中的导入中。

Answer 21

当我将一个组件输入命名为“ formControl”时，我也收到此错误。可能是为其他东西保留的。如果要在组件之间传递FormControl对象，请像这样使用它：

@Input() control: FormControl;

不是这样的：

@Input() formControl: FormControl;

很奇怪-但是正在工作：）

Answer 22

我有同样的错误，但在我看来，这是在呈现组件html时出现的同步问题。

我遵循了本页上提出的一些解决方案，但是其中任何一个对我都有效，至少不是完全有效。

真正解决了我的错误的是在元素的父html标签内编写以下代码段。

我绑定到了变量。

代码：

    *ngIf="variable-name"

该错误显然是由项目试图渲染页面引起的，显然是在评估变量时，该项目无法找到其值。使用上面的代码段，请确保在呈现页面之前，询问变量是否已初始化。

这是我的component.ts代码：

import { Component, OnInit } from '@angular/core';
import { InvitationService } from 'src/app/service/invitation.service';
import { BusinessService } from 'src/app/service/business.service';
import { Invitation } from 'src/app/_models/invitation';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-invitation-details',
  templateUrl: './invitation-details.component.html',
  styleUrls: ['./invitation-details.component.scss']
})
export class InvitationDetailsComponent implements OnInit {
  invitationsList: any;
  currentInvitation: any;
  business: any;
  invitationId: number;
  invitation: Invitation;

  constructor(private InvitationService: InvitationService, private BusinessService: 
BusinessService) { 
this.invitationId = 1; //prueba temporal con invitacion 1
this.getInvitations();
this.getInvitationById(this.invitationId);
  }

   ngOnInit() {

  }

  getInvitations() {
    this.InvitationService.getAllInvitation().subscribe(result => {
      this.invitationsList = result;
      console.log(result);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  getInvitationById(invitationId:number){
    this.InvitationService.getInvitationById(invitationId).subscribe(result => {
      this.currentInvitation = result;
      console.log(result);
      //this.business=this.currentInvitation['business'];
       //console.log(this.currentInvitation['business']); 
     }, error => {
     console.log(JSON.stringify(error));
    });
  }
      ...

这是我的html标记：

<div class="container-fluid mt--7">
  <div class="row">
    <div class="container col-xl-10 col-lg-8">
      <div class="card card-stats ">
        <div class="card-body container-fluid form-check-inline" 
         *ngIf="currentInvitation">
          <div class="col-4">
             ...

我希望这会有所帮助。

Answer 23

在我的情况下，我使用了指令，但是没有将其导入到我的module.ts文件中。导入修复它。

Answer 24

我遇到了同样的错误-我不小心将[（ngModel）]绑定到了我的mat-form-field而不是input元素上。

Answer 25

在我的情况下，当转换为有角度的代码时，我有一个来自旧html的<TEXTAREA>标签。必须更改为<textarea>。

错误错误：交换机上没有指定名称属性的表单控件没有值访问器

25 个答案: