这是我的 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)
当我将元素开关更改为输入时,它可以工作,因为我知道我对其他组件使用相同的结构并且它工作正常。
ControlValueAccessor
- Never again be confused when implementing ControlValueAccessor in Angular forms
我通过将 name="fieldName" ngDefaultControl
属性添加到带有 [(ngModel)]
属性的元素来修复此错误。
我遇到了同样的问题,问题是我的子组件有一个名为 formControl
的 @input
。
所以我只需要改变:
<my-component [formControl]="formControl"><my-component/>
至:
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
在 Angular 7 中编写自定义表单控件组件时,我也收到了这个错误。但是,没有一个答案适用于 Angular 7。
在我的例子中,需要将以下内容添加到 @Component
装饰器中:
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
这是一个“我不知道它为什么有效,但它确实有效”的案例。将其归结为 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>
我刚刚添加了 ngDefaultControl
<button (click)="Addcity(city.name)" [(ngModel)]="city.name" ngDefaultControl class="dropdown-item fontstyle"
*ngFor="let city of Cities; let i = index">
{{city.name}}
我在运行 Karma 单元测试用例时遇到了这个错误在导入中添加 MatSelectModule 修复了这个问题
imports: [
HttpClientTestingModule,
FormsModule,
MatTableModule,
MatSelectModule,
NoopAnimationsModule
],
我在 Jasmine 的单元测试中收到此错误消息。我向自定义元素添加了 ngDefaultControl 属性(在我的情况下,它是一个有角度的材质幻灯片切换),这解决了错误。
<mat-slide-toggle formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
更改上述元素以包含 ngDefaultControl 属性
<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
Extra Cheese
</mat-slide-toggle>
就我而言,我忘记将 providers: [INPUT_VALUE_ACCESSOR]
添加到我的自定义组件中
我将 INPUT_VALUE_ACCESSOR 创建为:
export const INPUT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextEditorComponent),
multi: true,
};
我遇到了同样的错误 - 我不小心将 [(ngModel)] 绑定到我的 mat-form-field
而不是 input
元素。
当我将其中一个组件输入命名为“formControl”时,我也收到了此错误。可能它是为其他东西保留的。如果要在组件之间传递 FormControl 对象,请像这样使用它:
@Input() control: FormControl;
不是这样的:
@Input() formControl: FormControl;
奇怪 - 但工作:)
formControl
是 Angular 将表单控件绑定到输入字段的默认指令
在我的情况下,我使用了指令,但没有将它导入到我的 module.ts 文件中。导入修复它。
ng serve
以刷新导入
这有点愚蠢,但我不小心使用 [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: ''
})
}
}
就我而言,问题是我创建了一个具有保留名称 formControl
的 @Input
变量。
就我而言,它发生在我的共享模块中,我必须将以下内容添加到@NgModule:
...
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule
],
...
ng-zorro
角度组件时。他们改变了其组件的导入方式。我刚刚错过了复选框组件。
就我而言,我在标签上插入了 [(ngModel)] 而不是输入。还有一个警告,我尝试在指定行中正确运行上述错误但错误不会消失。如果您在其他地方犯了同样的错误,它仍然会在同一行抛出同样的错误
如果您尝试将 ngModel 添加到非输入元素(如 <option>
HTML 标记),也会出现此错误。确保仅将 ngModel 添加到 <input>
标记。就我而言,我已将 ngModel 添加到 <ion-select-option>
而不是 <ion-select>
。
我在 mat-select 中使用了 formControl,如下所示:
<mat-select [formControl]="control">
...
</mat-select>
我意识到 MatSelectModule 没有导入到规范文件中,这解决了这个问题。
如果这对某人有帮助,我会收到此错误,因为我在选择的选项标签内有 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>
我遇到了同样的错误,我的自定义表单组件中有一个名为 control
的输入字段,但意外地在名为 formControl
的输入中传递了控制权。希望没有人面临这个问题。
就我而言,这就像在我的 app.module.ts
声明中为 DI 注册新组件但在导出中没有一样愚蠢。
我有同样的错误,但在我的情况下,显然这是一个同步问题,在渲染组件 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">
...
我希望这会有所帮助。
您是否尝试过将您的 [(ngModel)]
移动到 div
而不是 HTML 中的 switch
?我的代码中出现了同样的错误,这是因为我将模型绑定到 <mat-option>
而不是 <mat-select>
。虽然我没有使用表单控件。
在我的情况下,它是一个不存在的 component.member 例如
[formControl]="personId"
将其添加到类声明中修复了它
this.personId = new FormControl(...)
我在运行单元测试时遇到了这个问题。为了解决这个问题,我将 MatSlideToggleModule 添加到我的 spec.ts 文件中的导入中。
看起来“formControl”是Angular Forms的保留名称,当我将此名称用作组件的输入时,我的实际控制出现了意外行为。如果你问我,这是一个 Angular 错误。只需将您的输入名称替换为“frmCtrl”或其他名称,它就会起作用。
在我的情况下,错误是由复制模块中的组件导入触发的。
#背景
原生脚本 6.0
在我的情况下,错误是通过将元素标签从故障更改为触发的。在
删除 [(ngModel)]="name" 后错误消失了。
我有同样的错误只需要在 module.ts 中导入表单模块
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule]
)}
当我尝试集成 angular editor 时,我遇到了同样的问题
我通过将 [ngModelOptions]="{standalone: true}"
添加到我的标签来解决这个问题。
<angular-editor [ngModelOptions]="{standalone: true}" [(ngModel)]="htmlContent" [config]="config"></angular-editor>
我希望这是最快的解决方案reference
当您在不能具有 <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
我还创建了一个自定义控件。以下解决了这个问题:
constructor(
@Optional() @Self()
readonly ngControl: NgControl,
) {
this.ngControl.valueAccessor = this;
}
ngDefaultControl
的文档?name="fieldname"
不是必需的,但ngDefaultControl
可以解决问题。