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

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.

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

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;

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.

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}}

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

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>

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

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
      ],

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: ''
    })
  }
}

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

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.

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.

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.

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.

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.

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(...)

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

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

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