下面是我的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)
当我改变元素开关输入它工作，知道我使用相同的结构到其他组件，它工作得很好。
这是一种愚蠢的，但我得到这个错误消息，不小心使用[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中编写自定义表单控件组件时也收到过这个错误。然而，这些答案都不适用于Angular 7。
在我的例子中，需要将以下内容添加到@Component装饰器中:
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
这是一个“我不知道为什么它有效，但它确实有效”的案例。这要归咎于Angular糟糕的设计/实现。
我有同样的错误，但在我的情况下，这显然是一个同步问题，在呈现组件html的时刻。
我遵循了本页上提出的一些解决方案，但它们都对我有效，至少不是完全有效。
真正解决我的错误的是在元素的父html标记中编写下面的代码片段。
我绑定了变量。
代码:
*ngIf="variable-name"
该错误显然是由项目试图渲染页面引起的，显然在评估变量的时候，项目就是找不到它的值。使用上面的代码片段，您可以确保在呈现页面之前询问变量是否已初始化。
这是我的分量。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">
...
我希望这能对你有所帮助。
当你在一个不能有<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
