Angular 错误：开关上具有未指定名称属性的窗体控件没有值访问器

这是我的角度分量：

@组件（{
选择器：“输入额外字段”，
模板：`
`
} )

这是我的班级：

导出类SwitchExtraField扩展ExtraField{
@Input（）字段：ExtraFormField；
@Input（）实体：{fields:Object}；
@Input（）formGroup:formGroup；
构造函数（formDir:NgForm）{
super（null，null，formDir）；
}
get disabled（）：字符串{
if（this.field&！！this.field.saisisable&&！this.field.saisisable）{
返回“禁用”；
}
返回null；
}
}

这是我在编译时遇到的错误：

错误：表单控件没有具有未指定名称属性的值访问器
美国投手协会（forms.es5.js:1918）
在setUpControl（forms.es5.js:1828）
在FormControlDirective.webpackJsonp…/../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges（forms.es5.js:4617）

---

当我将element开关更改为input时，它可以工作，因为我知道我对其他组件使用了相同的结构，并且工作正常。

我通过将

name=“fieldName”ngDefaultControl

属性添加到携带

[（ngModel）]

属性。

我也有同样的问题，问题是我的子组件有一个名为

formControl

的

@input

所以我只需要改变一下：

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

---

这有点愚蠢，但是我不小心用了

[formControl]

而不是

[formGroup]

得到了这个错误消息。请看这里：

错误

@组件({
选择器：“应用程序用途”，
模板：`
`
})
导出类MyComponent实现OnInit{
formGroup:formGroup
建造师(
私有表单生成器：表单生成器
) { }
恩戈尼尼特（）{
this.formGroup=this.formBuilder.group({
formGroupProperty:“”
})
}
}

对

@组件({
选择器：“应用程序用途”，
模板：`
`
})
导出类MyComponent实现OnInit{
formGroup:formGroup
建造师(
私有表单生成器：表单生成器
) { }
恩戈尼尼特（）{
this.formGroup=this.formBuilder.group({
formGroupProperty:“”
})
}
}

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

在我的例子中，需要将以下内容添加到

@组件

装饰器中：

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

---

这是一个“我不知道为什么它能工作，但它能工作”的例子。这归因于Angular的设计/实现很差。

我也有同样的错误，Angular 7

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

{{city.name}

我刚刚添加了ngDefaultControl

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

{{city.name}

---

我也有同样的错误-我意外地将[（ngModel）]绑定到我的

mat表单字段

，而不是

输入

元素。

在我的例子中，我使用了指令，但没有将其导入module.ts文件。导入修复了它。

在我的例子中，我在标签上插入了[（ngModel）]，而不是输入。

---

还有一个警告，我尝试在指定行中正确地运行上述错误，但错误不会消失。如果您在其他地方犯了相同的错误，它仍会在同一行向您抛出相同的错误

我也有相同的错误，但在我的情况下，显然是在呈现组件html时出现了同步问题

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

真正解决我的错误的是在元素的父html标记中编写下面的代码片段

我绑定到变量

代码：

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

这是我的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">
             ...

...

---

我希望这能有所帮助。

我也有同样的错误，我在自定义表单组件中有一个名为

control

的输入字段，但意外地在名为

formControl

的输入中传递了控件。希望没有人会遇到这个问题。

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

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

---

您是否尝试过将

[（ngModel）]

移动到

div

而不是HTML中的

开关

？我的代码中出现了相同的错误，这是因为我将模型绑定到了

而不是

。虽然我没有使用表单控件。

在我的例子中，它是一个不存在的component.member，例如

[formControl]="personId"

将它添加到类声明中修复了它

this.personId = new FormControl(...)

---

我在与Jasmine的单元测试中收到了这个错误消息。我向自定义元素添加了ngDefaultControl属性（在我的例子中，它是一个角度材质滑动切换），这解决了错误

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

额外的奶酪

将上述元素更改为包含ngDefaultControlattAttribute

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

额外的奶酪

在我的例子中，在转换为angular时，我有一个来自旧html的

标记。必须更改为

在我的情况下，它发生在我的共享模块中，我必须将以下内容添加到@NgModule中：

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

---

在我的例子中，这就像在我的

app.module.ts

声明中注册DI的新组件一样愚蠢，而不是在导出中注册一样愚蠢。

在我的例子中，错误是

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

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

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

@Input() control: FormControl;

@Input() formControl: FormControl;

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

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