ERROR Error: No value accessor for form control with unspecified name attribute on switch
ERROR Error: No value accessor for form control with unspecified name attribute on switch
这是我的 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>
`
} )
这是我的 Class:
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)
当我将元素开关更改为输入时，它工作正常，因为我知道我对其他组件使用相同的结构并且工作正常。
我通过将 name="fieldName" ngDefaultControl 属性添加到带有 [(ngModel)] 属性的元素来修复此错误。
我遇到了同样的问题，问题是我的子组件有一个名为 formControl 的 @input。
所以我只需要更改：
<my-component [formControl]="formControl"><my-component/>
至：
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
这有点愚蠢，但我不小心使用 [formControl] 而不是 [formGroup] 得到了这条错误消息。看这里：
错误
@Component({
selector: 'app-application-purpose',
template: `
<div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
<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"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}
我在 Angular 7 中编写自定义表单控件组件时也收到此错误。但是，none 的答案适用于 Angular 7。
在我的例子中，需要将以下内容添加到 @Component 装饰器中：
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
这是 "I don't know why it works, but it does." 的情况，归咎于 Angular 方面的可怜 design/implementation。
我也有同样的错误，angular7
<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}}
我遇到了同样的错误 - 我不小心将 [(ngModel)] 绑定到我的 mat-form-field 而不是 input 元素。
在我的例子中，我使用了指令，但没有将它导入到我的 module.ts 文件中。导入修复它。
在我的例子中，我在标签上插入了 [(ngModel)] 而不是输入。
还有一个警告，我在指定行中正确出现上述错误后尝试 运行 但错误不会消失。如果你在其他地方犯了同样的错误，它仍然在同一行抛出同样的错误
我有同样的错误，但在我的情况下，显然这是一个同步问题，在渲染组件时 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">
...
希望对您有所帮助。
我遇到了同样的错误，我的自定义表单组件中有一个名为 control 的输入字段，但不小心传递了名为 formControl 的输入中的控制权。希望没有人遇到这个问题。
我在 运行 Karma 单元测试用例时遇到了这个错误
在导入中添加 MatSelectModule 修复了问题
imports: [
HttpClientTestingModule,
FormsModule,
MatTableModule,
MatSelectModule,
NoopAnimationsModule
],
您是否尝试过将 [(ngModel)] 移动到 div 而不是 HTML 中的 switch？我的代码中出现了同样的错误，这是因为我将模型绑定到 <mat-option> 而不是 <mat-select>。虽然我没有使用表单控件。
在我的例子中，它是 component.member，它不存在，例如
[formControl]="personId"
将它添加到 class 声明中修复了它
this.personId = new FormControl(...)
我在使用 Jasmine 进行单元测试时收到此错误消息。我将 ngDefaultControl 属性添加到自定义元素（在我的例子中它是一个 angular material 滑动切换），这解决了错误。
<mat-slide-toggle formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
更改以上元素以包含 ngDefaultControl 属性
<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
在我的例子中，我有一个来自旧 html 的 <TEXTAREA> 标签，同时转换为 angular。不得不改为 <textarea>.
就我而言，它发生在我的共享模块中，我必须将以下内容添加到@NgModule：
...
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule
],
...
在我的例子中，它就像在我的 app.module.ts 声明中为 DI 注册了新组件一样愚蠢，但在出口中 没有 。
在我的例子中，错误是由于在模块中重复导入组件而触发的。
#背景
- 本机脚本 6.0
在我的例子中，错误是由于错误地将元素标签从 更改为 触发的。在
删除 [(ngModel)]="name" 后错误消失了。
我在 运行 单元测试时遇到了这个问题。为了解决这个问题，我将 MatSlideToggleModule 添加到我的 spec.ts 文件中的导入中。
我在命名我的组件输入之一时也收到此错误 'formControl'。可能它是为别的东西保留的。如果你想在组件之间传递 FormControl 对象，像这样使用它：
@Input() control: FormControl;
不是这样的：
@Input() formControl: FormControl;
奇怪 - 但有效:)
如果您尝试将 ngModel 添加到 <option> HTML 标签等非输入元素，也会发生此错误。确保只将 ngModel 添加到 <input> 标签。
在我的例子中，我添加了一个 ngModel 到 <ion-select-option> 而不是 <ion-select>.
在我的例子中，我忘记将 providers: [INPUT_VALUE_ACCESSOR] 添加到我的自定义组件
我将 INPUT_VALUE_ACCESSOR 创建为：
export const INPUT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextEditorComponent),
multi: true,
};
在我的例子中，问题是我创建了一个具有保留名称 formControl 的 @Input 变量。
我在 mat-select 中使用 formControl，如下所示：
<mat-select [formControl]="control">
...
</mat-select>
我意识到 MatSelectModule 没有导入到规范文件中，这解决了问题。
如果这对某人有帮助，我会收到此错误，因为我在 select.
的选项标签内有 ngModel
错误地（我的），我有这个：
<select class="form-control">
<option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" [(ngModel)]="dependent.state">{{mystate.stateName}}</option>
</select>
而不是这个：
<select class="form-control" [(ngModel)]="dependent.state">
<option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" >{{mystate.stateName}}</option>
</select>
看起来“formControl”是 Angular Forms 的保留名称，当我将此名称用作我的组件的输入时，我的实际 from 控件出现了意外行为。如果您问我，这是一个 Angular 错误。只需将您的输入名称替换为“frmCtrl”之类的其他名称，它就会起作用。
我遇到了同样的错误，只需要在 module.ts
中导入表单模块
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule]
)}
这是我的 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>
`
} )
这是我的 Class:
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)
当我将元素开关更改为输入时，它工作正常，因为我知道我对其他组件使用相同的结构并且工作正常。
我通过将 name="fieldName" ngDefaultControl 属性添加到带有 [(ngModel)] 属性的元素来修复此错误。
我遇到了同样的问题，问题是我的子组件有一个名为 formControl 的 @input。
所以我只需要更改：
<my-component [formControl]="formControl"><my-component/>
至：
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
这有点愚蠢，但我不小心使用 [formControl] 而不是 [formGroup] 得到了这条错误消息。看这里：
错误
@Component({
selector: 'app-application-purpose',
template: `
<div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
<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"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
<input formControlName="formGroupProperty" />
</div>
`
})
export class MyComponent implements OnInit {
formGroup: FormGroup
constructor(
private formBuilder: FormBuilder
) { }
ngOnInit() {
this.formGroup = this.formBuilder.group({
formGroupProperty: ''
})
}
}
我在 Angular 7 中编写自定义表单控件组件时也收到此错误。但是，none 的答案适用于 Angular 7。
在我的例子中，需要将以下内容添加到 @Component 装饰器中：
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
这是 "I don't know why it works, but it does." 的情况，归咎于 Angular 方面的可怜 design/implementation。
我也有同样的错误，angular7
<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}}
我遇到了同样的错误 - 我不小心将 [(ngModel)] 绑定到我的 mat-form-field 而不是 input 元素。
在我的例子中，我使用了指令，但没有将它导入到我的 module.ts 文件中。导入修复它。
在我的例子中，我在标签上插入了 [(ngModel)] 而不是输入。 还有一个警告，我在指定行中正确出现上述错误后尝试 运行 但错误不会消失。如果你在其他地方犯了同样的错误，它仍然在同一行抛出同样的错误
我有同样的错误，但在我的情况下，显然这是一个同步问题，在渲染组件时 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">
...
希望对您有所帮助。
我遇到了同样的错误，我的自定义表单组件中有一个名为 control 的输入字段，但不小心传递了名为 formControl 的输入中的控制权。希望没有人遇到这个问题。
我在 运行 Karma 单元测试用例时遇到了这个错误 在导入中添加 MatSelectModule 修复了问题
imports: [
HttpClientTestingModule,
FormsModule,
MatTableModule,
MatSelectModule,
NoopAnimationsModule
],
您是否尝试过将 [(ngModel)] 移动到 div 而不是 HTML 中的 switch？我的代码中出现了同样的错误，这是因为我将模型绑定到 <mat-option> 而不是 <mat-select>。虽然我没有使用表单控件。
在我的例子中，它是 component.member，它不存在，例如
[formControl]="personId"
将它添加到 class 声明中修复了它
this.personId = new FormControl(...)
我在使用 Jasmine 进行单元测试时收到此错误消息。我将 ngDefaultControl 属性添加到自定义元素（在我的例子中它是一个 angular material 滑动切换），这解决了错误。
<mat-slide-toggle formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
更改以上元素以包含 ngDefaultControl 属性
<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
在我的例子中，我有一个来自旧 html 的 <TEXTAREA> 标签，同时转换为 angular。不得不改为 <textarea>.
就我而言，它发生在我的共享模块中，我必须将以下内容添加到@NgModule：
...
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule
],
...
在我的例子中，它就像在我的 app.module.ts 声明中为 DI 注册了新组件一样愚蠢，但在出口中 没有 。
在我的例子中，错误是由于在模块中重复导入组件而触发的。
#背景
- 本机脚本 6.0
在我的例子中，错误是由于错误地将元素标签从 更改为 触发的。在 删除 [(ngModel)]="name" 后错误消失了。
我在 运行 单元测试时遇到了这个问题。为了解决这个问题，我将 MatSlideToggleModule 添加到我的 spec.ts 文件中的导入中。
我在命名我的组件输入之一时也收到此错误 'formControl'。可能它是为别的东西保留的。如果你想在组件之间传递 FormControl 对象，像这样使用它：
@Input() control: FormControl;
不是这样的：
@Input() formControl: FormControl;
奇怪 - 但有效:)
如果您尝试将 ngModel 添加到 <option> HTML 标签等非输入元素，也会发生此错误。确保只将 ngModel 添加到 <input> 标签。
在我的例子中，我添加了一个 ngModel 到 <ion-select-option> 而不是 <ion-select>.
在我的例子中，我忘记将 providers: [INPUT_VALUE_ACCESSOR] 添加到我的自定义组件
我将 INPUT_VALUE_ACCESSOR 创建为：
export const INPUT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextEditorComponent),
multi: true,
};
在我的例子中，问题是我创建了一个具有保留名称 formControl 的 @Input 变量。
我在 mat-select 中使用 formControl，如下所示：
<mat-select [formControl]="control">
...
</mat-select>
我意识到 MatSelectModule 没有导入到规范文件中，这解决了问题。
如果这对某人有帮助，我会收到此错误，因为我在 select.
的选项标签内有 ngModel错误地（我的），我有这个：
<select class="form-control">
<option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" [(ngModel)]="dependent.state">{{mystate.stateName}}</option>
</select>
而不是这个：
<select class="form-control" [(ngModel)]="dependent.state">
<option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" >{{mystate.stateName}}</option>
</select>
看起来“formControl”是 Angular Forms 的保留名称，当我将此名称用作我的组件的输入时，我的实际 from 控件出现了意外行为。如果您问我，这是一个 Angular 错误。只需将您的输入名称替换为“frmCtrl”之类的其他名称，它就会起作用。
我遇到了同样的错误，只需要在 module.ts
中导入表单模块import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule]
)}