Angular 4のコンポーネントは次のとおりです。
@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)
要素スイッチを入力に変更すると、他のコンポーネントに同じ構造を使用していることを認識して動作し、正常に動作します。
name="fieldName" ngDefaultControl
属性を[(ngModel)]
属性を持つ要素に追加することにより、このエラーを修正しました。
Angular 7でカスタムフォームコントロールコンポーネントを記述しているときにもこのエラーを受け取りました。ただし、Angular 7に該当する回答はありません。
私の場合、以下を@Component
デコレーターに追加する必要がありました。
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyCustomComponent), // replace name as appropriate
multi: true
}
]
これは、「なぜ機能するのかわかりませんが、機能します」というケースです。 Angular側の設計/実装が不十分な場合は、それをチョークしてください。
私は同じ問題を抱えていましたが、問題は、子コンポーネントにformControl
という名前の@input
があったことです。
だから私はちょうどから変更する必要がありました:
<my-component [formControl]="formControl"><my-component/>
に:
<my-component [control]="control"><my-component/>
ts:
@Input()
control:FormControl;
私も同じエラーがありました、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}}
これは一種の愚かですが、誤って[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: ''
})
}
}
私の場合、ディレクティブを使用しましたが、module.tsファイルにインポートしていませんでした。インポートはそれを修正しました。
同じエラーが発生しましたが、私の場合、コンポーネントhtmlをレンダリングする時点で、明らかに同期化の問題でした。私はこのページで提案された解決策のいくつかに従いましたが、それらのいずれかが少なくとも完全には機能しませんでした。実際に私のエラーを解決したのは、変数にバインドしていたelementosのfather 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)]を挿入しました。警告もあります。指定された行で上記のエラーを正しく実行した後、実行しようとしましたが、エラーは発生しませんでした。同じ間違いを犯した場所が他にある場合でも、同じ行に同じエラーがスローされます
これと同じエラーが発生しました。誤って[(ngModel)]をinput
要素ではなくmat-form-field
にバインドしました。