FEHLER Fehler: Kein Wertzugriff für die Formularsteuerung mit nicht angegebenem Namensattribut auf dem Switch

96

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.

Verklagen
quelle
1
Lesen Sie hier über ControlValueAccessor-
Seien Sie
Dies kann Ihnen wahrscheinlich helfen: stackoverflow.com/questions/46708080/…
Dinistro

Antworten:

137

Ich habe diesen Fehler behoben, indem ich die name="fieldName" ngDefaultControlAttribute dem Element hinzugefügt habe , das das [(ngModel)]Attribut enthält.

Pierre-Alexis Ciavaldini
quelle
33
Eine zusätzliche Erklärung würde dies zu einer besseren Antwort machen. Wo haben Sie ngDefaultControlzum Beispiel Dokumentation gefunden ?
Isherwood
9
Ich denke, name="fieldname"ist nicht notwendig, aber ngDefaultControlheilt das Problem.
michaeak
3
Weitere Erklärungen finden Sie hier. stackoverflow.com/questions/46465891/…
Ich bin
Das Hinzufügen von "ngDefaultControl" (für das Attribut mit der Direktive * ngFor) löste mein ähnliches Problem.
Davidson Lima
86

Ich hatte das gleiche Problem und das Problem war, dass meine untergeordnete Komponente einen @inputNamen hatte formControl.

Also musste ich nur wechseln von:

<my-component [formControl]="formControl"><my-component/>

zu:

<my-component [control]="control"><my-component/>

ts:

@Input()
control:FormControl;
Eduardo Vargas
quelle
14
Riesiger Lebensretter! Vielen Dank, sehr schwer zu finden.
H Hund
4
Konnte
1
Hatte das gleiche Problem! Verschwendet um 1 Stunde, bevor Sie googeln und zu Ihrer Antwort gelangen. danke
wmehanna
1
Wow, es hat viel zu lange
gedauert
Funktioniert mit Angular 10, wie in einem vorherigen Kommentar erwähnt, ist es sehr schwierig, diesen zu finden. Danach ist es jedoch sinnvoll, "formControl" aufgrund eines möglichen Namespace-Konflikts nicht als Eigenschaftsname der Komponente @Input zu verwenden Eine andere Namenslösung könnte darin bestehen, das Feld _formControl umzubenennen, das von einer FormControl-Instanz gespeist wird.
Thomas
41

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 @ComponentDekorateur Folgendes hinzugefügt werden :

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

Dies ist ein Fall von "Ich weiß nicht, warum es funktioniert, aber es funktioniert." Kreide es auf schlechtes Design / Implementierung seitens Angular.

theMayer
quelle
6
Dieses Snippet teilt Angulars Abhängigkeitsinjektionsschicht mit, dass Ihre Klasse zurückgegeben werden soll, wenn andere Klassen (dh die formControlName-Direktive) sie nach dem Token NG_VALUE_ACCESSOR fragen. Ohne sie hätte Angular keine Möglichkeit zu wissen, dass Ihre Klasse ein benutzerdefiniertes Formularsteuerelement ist (alle Informationen zu Schnittstellen usw. werden während der Transpilation entfernt)
Max Mumford,
18

Ich hatte auch den gleichen Fehler, Winkel 7

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

Ich habe gerade ngDefaultControl hinzugefügt

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Nadeem Qasmi
quelle
Danke, dass du mein Leben gerettet hast!
Varun Kumar
7

Ich hatte den gleichen Fehler - ich habe versehentlich [(ngModel)] an mein mat-form-fieldanstelle des inputElements gebunden .

Chris Fremgen
quelle
Hatte das gleiche Problem
Damith
6

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.

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

Ändern Sie das obige Element so, dass es das Attribut ngDefaultControl enthält

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>
Sudharshan
quelle
5

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

Nishanth Subramanya
quelle
1
Das ist eine gute Antwort. Bei einigen Komponenten (Auswahl, Radio usw.) können Sie das ngModel wie folgt ausrutschen und an die falsche Stelle kleben. Die Fehlermeldung hilft nicht viel.
AndrewBenjamin
5

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

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],
Dan Patil
quelle
Nur wenn Sie "Angular Material" installiert haben, sonst brauchen Sie dies nicht.
Mikefox2k
3

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: ''
    })
  }
}
Trevor
quelle
Das war es auch für mich !! So subtil, weil mir die Dokumente den Code gegeben haben, mit dem ich arbeite.
Sankofa
2

In meinem Fall habe ich die Direktive verwendet, sie aber nicht in meine Datei module.ts importiert. Import behoben.

Andris
quelle
Danke, aber ich musste auch neu starten ng serve, um den Import zu
aktualisieren
2

Ich hatte den gleichen Fehler, ich hatte ein Eingabefeld controlin meiner benutzerdefinierten Formularkomponente, aber ich habe versehentlich die Kontrolle in der Eingabe mit dem Namen übergeben formControl. Hoffe, niemand steht vor diesem Problem.

Nikhil Arora
quelle
2

In meinem Fall war es so dumm, die neue Komponente für DI in meinen app.module.tsErklärungen registriert zu haben, aber nicht im Export.

Wikooo
quelle
1

In meinem Fall geschieht dies in meinem freigegebenen Modul und ich musste @NgModule Folgendes hinzufügen:

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

Verbrachte viele Stunden, damit es funktioniert. Ich hoffe, dies hilft einigen anderen, die mit solchen Fehlern zu kämpfen haben.

Pei
quelle
0

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:

    *ngIf="variable-name"

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:

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));
    });
  }
      ...

Hier ist mein HTML-Markup:

<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">
             ...

Ich hoffe das kann hilfreich sein.

NUKE
quelle
Dieser Link hat ein ähnliches Problem: stackoverflow.com/q/49409674/8992452 Vielleicht kann es bei dem Problem helfen
NUKE
0

Haben Sie versucht, Ihre [(ngModel)]in die divanstelle der switchin 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.

Mneumann
quelle
0

In meinem Fall war es ein component.member, das nicht existierte, z

[formControl]="personId"

Durch Hinzufügen zur Klassendeklaration wurde das Problem behoben

this.personId = new FormControl(...)
Stefan Michev
quelle
0

In meinem Fall wurde der Fehler durch Duplizieren eines Imports einer Komponente in das Modul ausgelöst.

Aleks Grunwald
quelle
0

#Hintergrund

  • NativeScript 6.0

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.

Chris S.
quelle
-1

In meinem Fall hatte ich <TEXTAREA>beim Konvertieren in Angular ein Tag aus altem HTML. Musste umsteigen <textarea>.

Feng Zhang
quelle
Ich habe nicht abgelehnt, aber das sollte NIEMALS die Ursache sein.
FindOutIslamNow