我是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)
当我将元素开关更改为输入时,它知道我使用与其他组件相同的结构并且工作正常。
谢谢。
答案 0 :(得分:21)
我通过将name="fieldName" ngDefaultControl
属性添加到带有[(ngModel)]
属性的元素来修复此错误。
答案 1 :(得分:6)
就我而言,我忘记将 providers: [INPUT_VALUE_ACCESSOR]
添加到我的自定义组件
我将 INPUT_VALUE_ACCESSOR 创建为:
export const INPUT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextEditorComponent),
multi: true,
};
答案 2 :(得分:4)
我遇到了同样的问题,问题是我的子组件有一个名为formControl的输入。
所以我只需要更改:
<my-component [formControl]="formControl"><my-component/>
收件人:
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
答案 3 :(得分:4)
在Angular 7中编写自定义表单控件组件时,我也收到此错误。但是,所有答案都不适用于Angular 7。
就我而言,需要将以下内容添加到@Component
装饰器中:
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
这种情况是“我不知道为什么会起作用,但是会起作用。”总结一下Angular的不良设计/实现。
答案 4 :(得分:4)
就我而言,问题是我创建了一个保留名称为 @Input
的 formControl
变量。
答案 5 :(得分:4)
如果您尝试将 ngModel 添加到非输入元素(如 <option>
HTML 标签),也会发生此错误。确保仅将 ngModel 添加到 <input>
标签。
就我而言,我已将 ngModel 添加到 <ion-select-option>
而不是 <ion-select>
。
答案 6 :(得分:2)
我也有同样的错误,角度为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}}
答案 7 :(得分:2)
就我而言,我在标签而非输入上插入了[[ngModel)]。 还有一个警告,我尝试在指定的行中正确地执行上述错误后运行,但该错误不会消失。如果您在其他地方犯了相同的错误,它仍然会在同一行中向您抛出相同的错误
答案 8 :(得分:2)
就我而言,这就像在我的app.module.ts
声明中为DI注册新组件而在出口中不是注册了DI的新组件一样。
答案 9 :(得分:2)
就我而言,这是在我的共享模块中发生的,我必须在@NgModule中添加以下内容:
...
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule
],
...
答案 10 :(得分:1)
我在这样的 mat-select 中使用了 formControl:
<mat-select [formControl]="control">
...
</mat-select>
然后我意识到没有在规范文件中导入 MatSelectModule,这解决了这个问题。
答案 11 :(得分:1)
我在运行Karma单元测试用例时遇到此错误 在导入中添加 MatSelectModule 可以解决此问题
if(cookievoice === voices[i].name) {
option.setAttribute('selected', 'selected');
selectedIndex = i;
}
答案 12 :(得分:1)
这是一种愚蠢的做法,但是我偶然使用[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: ''
})
}
}
答案 13 :(得分:0)
您是否尝试过将[(ngModel)]
而不是HTML中的div
移到switch
?我的代码中出现了相同的错误,这是因为我将模型绑定到了<mat-option>
而不是<mat-select>
上。虽然我没有使用表单控件。
答案 14 :(得分:0)
在我的情况下,这是一个例如不存在的component.member。
[formControl]="personId"
将其添加到固定的类声明中
this.personId = new FormControl(...)
答案 15 :(得分:0)
我在使用Jasmine进行单元测试时收到了此错误消息。我在自定义元素中添加了 ngDefaultControl 属性(在我的情况下,这是一个有角度的材质滑动切换),可以解决该错误。
<mat-slide-toggle formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
更改上述元素以包括 ngDefaultControl 属性
<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
答案 16 :(得分:0)
我遇到了同样的错误,我在自定义表单组件中有一个名为control
的输入字段,但是意外地在名为formControl
的输入中传递了控件。希望没人面对这个问题。
答案 17 :(得分:0)
就我而言,该错误是通过在模块中复制组件的导入而触发的。
答案 18 :(得分:0)
#Background
在我的情况下,错误是通过将元素标签从更改为错误触发的。在 删除[(ngModel)] =“ name”错误后。
答案 19 :(得分:0)
我在运行单元测试时遇到了这个问题。为了解决此问题,我将MatSlideToggleModule添加到了spect.ts文件中的导入中。
答案 20 :(得分:0)
当我将一个组件输入命名为“ formControl”时,我也收到此错误。可能是为其他东西保留的。如果要在组件之间传递FormControl对象,请像这样使用它:
@Input() control: FormControl;
不是这样的:
@Input() formControl: FormControl;
很奇怪-但是正在工作:)
答案 21 :(得分:0)
我有同样的错误,但在我看来,这是在呈现组件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">
...
我希望这会有所帮助。
答案 22 :(得分:0)
在我的情况下,我使用了指令,但是没有将其导入到我的module.ts文件中。导入修复它。
答案 23 :(得分:0)
我遇到了同样的错误-我不小心将[(ngModel)]绑定到了我的mat-form-field
而不是input
元素上。
答案 24 :(得分:-1)
在我的情况下,当转换为有角度的代码时,我有一个来自旧html的<TEXTAREA>
标签。必须更改为<textarea>
。