Hier ist meine Komponente in 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>
`
} )
Hier ist meine Klasse:
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;
}
}
Dies ist der Fehler, den ich beim Kompilieren bekomme:
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)
Wenn ich den Elementschalter auf Eingabe ändere, funktioniert es, da ich weiß, dass ich für andere Komponenten dieselbe Struktur verwende und es einwandfrei funktioniert.
angular
form-control
Verklagen
quelle
quelle
ControlValueAccessor
-Antworten:
Ich habe diesen Fehler behoben, indem ich die
name="fieldName" ngDefaultControl
Attribute dem Element hinzugefügt habe , das das[(ngModel)]
Attribut enthält.quelle
ngDefaultControl
zum Beispiel Dokumentation gefunden ?name="fieldname"
ist nicht notwendig, aberngDefaultControl
heilt das Problem.Ich hatte das gleiche Problem und das Problem war, dass meine untergeordnete Komponente einen
@input
Namen hatteformControl
.Also musste ich nur wechseln von:
zu:
ts:
quelle
Ich habe diesen Fehler auch beim Schreiben einer benutzerdefinierten Formularsteuerungskomponente in Angular 7 erhalten. Keine der Antworten gilt jedoch für Angular 7.
In meinem Fall musste dem
@Component
Dekorateur Folgendes hinzugefügt werden :Dies ist ein Fall von "Ich weiß nicht, warum es funktioniert, aber es funktioniert." Kreide es auf schlechtes Design / Implementierung seitens Angular.
quelle
Ich hatte auch den gleichen Fehler, Winkel 7
Ich habe gerade ngDefaultControl hinzugefügt
quelle
Ich hatte den gleichen Fehler - ich habe versehentlich [(ngModel)] an mein
mat-form-field
anstelle desinput
Elements gebunden .quelle
Ich habe diese Fehlermeldung in meinen Unit-Tests mit Jasmine erhalten. Ich habe dem benutzerdefinierten Element das Attribut ngDefaultControl hinzugefügt (in meinem Fall war es ein Winkelschieber für Materialschieber), wodurch der Fehler behoben wird.
Ändern Sie das obige Element so, dass es das Attribut ngDefaultControl enthält
quelle
In meinem Fall hatte ich [(ngModel)] auf dem Etikett eingefügt und nicht eingegeben. Es gibt auch eine Einschränkung, ich habe versucht, den obigen Fehler in der angegebenen Zeile korrekt auszuführen, aber der Fehler ging nicht. Wenn es andere Stellen gibt, an denen Sie denselben Fehler begangen haben, wird immer noch derselbe Fehler in derselben Zeile ausgegeben
quelle
Ich habe diesen Fehler beim Ausführen von Karma Unit Test-Fällen festgestellt. Das Hinzufügen von MatSelectModule in den Importen behebt das Problem
quelle
Das ist irgendwie dumm, aber ich habe diese Fehlermeldung erhalten, indem ich versehentlich
[formControl]
statt verwendet habe[formGroup]
. Siehe hier:FALSCH
@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: '' }) } }
RICHTIG
@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: '' }) } }
quelle
In meinem Fall habe ich die Direktive verwendet, sie aber nicht in meine Datei module.ts importiert. Import behoben.
quelle
ng serve
, um den Import zuIch hatte den gleichen Fehler, ich hatte ein Eingabefeld
control
in meiner benutzerdefinierten Formularkomponente, aber ich habe versehentlich die Kontrolle in der Eingabe mit dem Namen übergebenformControl
. Hoffe, niemand steht vor diesem Problem.quelle
In meinem Fall war es so dumm, die neue Komponente für DI in meinen
app.module.ts
Erklärungen registriert zu haben, aber nicht im Export.quelle
In meinem Fall geschieht dies in meinem freigegebenen Modul und ich musste @NgModule Folgendes hinzufügen:
Verbrachte viele Stunden, damit es funktioniert. Ich hoffe, dies hilft einigen anderen, die mit solchen Fehlern zu kämpfen haben.
quelle
Ich hatte den gleichen Fehler, aber in meinem Fall handelte es sich anscheinend um ein Synchronisationsproblem, als die Komponenten in HTML gerendert wurden.
Ich habe einige der auf dieser Seite vorgeschlagenen Lösungen befolgt, aber jede davon hat für mich funktioniert, zumindest nicht vollständig.
Was meinen Fehler tatsächlich gelöst hat, war, das folgende Code-Snippet in das HTML-Tag des Vaters der Elemente zu schreiben.
Ich war an die Variable gebunden.
Code:
Der Fehler wurde anscheinend dadurch verursacht, dass das Projekt versuchte, die Seite zu rendern. Anscheinend konnte das Projekt zum Zeitpunkt der Auswertung der Variablen ihren Wert einfach nicht finden. Mit dem obigen Codefragment stellen Sie sicher, dass Sie vor dem Rendern der Seite fragen, ob die Variable initialisiert wurde.
Dies ist mein component.ts Code:
Hier ist mein HTML-Markup:
Ich hoffe das kann hilfreich sein.
quelle
Haben Sie versucht, Ihre
[(ngModel)]
in diediv
anstelle derswitch
in Ihrem HTML zu verschieben? Ich hatte den gleichen Fehler in meinem Code und das lag daran, dass ich das Modell an a<mat-option>
anstelle von a gebunden habe<mat-select>
. Obwohl ich keine Formularsteuerung verwende.quelle
In meinem Fall war es ein component.member, das nicht existierte, z
Durch Hinzufügen zur Klassendeklaration wurde das Problem behoben
quelle
In meinem Fall wurde der Fehler durch Duplizieren eines Imports einer Komponente in das Modul ausgelöst.
quelle
#Hintergrund
In meinem Fall wurde der Fehler durch Ändern des Element-Tags von auf Fehler ausgelöst. Innerhalb von <TextView an [(ngModel)] = "name". wurde definiert.
Nach dem Entfernen von [(ngModel)] = "name" war der Fehler verschwunden.
quelle
In meinem Fall hatte ich
<TEXTAREA>
beim Konvertieren in Angular ein Tag aus altem HTML. Musste umsteigen<textarea>
.quelle