ERROR-fout: geen waarde-accessor voor formulierbesturing met niet-gespecificeerd naamkenmerk op switch

Hier is mijn hoekcomponent:

@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 is mijn klas:

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

Dit is de foutmelding die ik krijg bij het compileren:

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)

Als ik de elementschakelaar verander naar invoer, werkt het, wetende dat ik dezelfde structuur gebruik voor andere componenten en het werkt prima.


Antwoord 1, autoriteit 100%

Ik heb deze fout verholpen door de kenmerken name="fieldName" ngDefaultControltoe te voegen aan het element met het kenmerk [(ngModel)].


Antwoord 2, autoriteit 65%

Ik had hetzelfde probleem en het probleem was dat mijn onderliggende component een @inputhad met de naam formControl.

Dus ik moest gewoon overstappen van:

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

naar:

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

ts:

@Input()
control:FormControl;

Antwoord 3, autoriteit 27%

Ik kreeg deze fout ook tijdens het schrijven van een aangepast formulierbesturingsonderdeel in Angular 7. Geen van de antwoorden is echter van toepassing op Angular 7.

In mijn geval moest het volgende worden toegevoegd aan de @Component-decorateur:

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

Dit is een geval van “Ik weet niet waarom het werkt, maar het werkt.” Krijt het maar op een slecht ontwerp/implementatie van de kant van Angular.


Antwoord 4, autoriteit 11%

Ik had ook dezelfde fout, hoekig 7

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

Ik heb zojuist ngDefaultControl

toegevoegd

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


Antwoord 5, autoriteit 4%

Ik was tegenover deze fout tijdens het uitvoeren van karma-eenheidstestcases
MATSELECTModule In de invoer is het probleem vast

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

Antwoord 6, Autoriteit 4%

Ik kreeg deze foutmelding in mijn eenheidstests met jasmijn. Ik voegde NGDefaultControl Attribuut toe aan het aangepaste element (in mijn geval het was een hoekige materiaalschuifwit) en dit lost de fout op.

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

Wijzig het bovenstaande element om NGDEFAULTCONTROL AttRIBUT

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

Antwoord 7, Autoriteit 4%

Ik had ditzelfde fout – ik heb per ongeluk gebonden [(ngmodel)] aan mijn mat-form-fieldin plaats van de inputElement.


Antwoord 8, Autoriteit 3%

Dit is een beetje dom, maar ik heb deze foutmelding door per ongeluk met [formControl]in plaats van [formGroup]te gebruiken. Zie hier:

verkeerde

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

rechts

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

Antwoord 9, Autoriteit 3%

In mijn geval ben ik vergeten providers: [INPUT_VALUE_ACCESSOR]aan mijn aangepaste component

Ik had input_value_accessor gemaakt als:

export const INPUT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextEditorComponent),
  multi: true,
};

Antwoord 10, Autoriteit 3%

In mijn geval heb ik de richtlijn gebruikt, maar had het niet geïmporteerd in mijn module.ts-bestand. Importeren opgelost.


Antwoord 11, Autoriteit 2%

In mijn geval had ik [(ngmodel)] op het etiket ingevoegd in plaats van input.
Er is ook een voorbehoud, ik heb geprobeerd na correct de bovenstaande fout in de opgegeven regel te gebruiken, maar de fout zou niet gaan. Als er andere plaatsen zijn waar je dezelfde fout hebt gepleegd, gooit het je nog steeds dezelfde fout op dezelfde regel


Antwoord 12, Autoriteit 2%

Ik heb deze fout ook ontvangen toen ik een van mijn component-ingangen ‘Formcontrol’ heeft genoemd. Waarschijnlijk is het gereserveerd voor iets anders. Als u Formcontrol-object tussen componenten wilt passeren, gebruikt u het zo:

@Input() control: FormControl;

Niet zoals deze:

@Input() formControl: FormControl;

raar – maar werken 🙂


Antwoord 13, Autoriteit 2%

Deze fout treedt ook op als u NGMODEL probeert toe te voegen aan de niet-invoerelementen zoals <option>HTML-tags. Zorg ervoor dat u NGMODEL alleen aan de <input>TAGS toevoegt.
In mijn geval heb ik een NGMODEL toegevoegd aan de <ion-select-option>in plaats van <ion-select>.


Antwoord 14, Autoriteit 2%

In mijn geval was het probleem dat ik een @InputVariabele met de gereserveerde naam formControl.


Antwoord 15, Autoriteit 2%

In mijn geval gebeurde het in mijn gedeelde module en moest ik het volgende toevoegen in @ngmodule:

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

Antwoord 16

Ik had dezelfde fout, ik had een invoerveld met de naam controlin mijn aangepaste formuliercomponent, maar was per ongeluk besturing in de ingang van de naam formControl. Ik hoop dat niemand voor die kwestie staat.


Antwoord 17

In mijn geval was het als Daft als het hebben van de nieuwe component voor DI in mijn app.module.tsVerklaringen, maar niet in export.


Antwoord 18

Ik gebruikte een formcontrol in een mat-select als dit:

<mat-select [formControl]="control">
 ...
</mat-select>

en ik besefte dat Matselectmodule niet in het SPEST-bestand is geïmporteerd, dat het probleem heeft opgelost.


Antwoord 19

Ik had dezelfde fout, maar in mijn geval was het blijkbaar een synchronisatieprobleem, op het moment van de componenten HTML.

Ik volgde een aantal van de oplossingen die op deze pagina zijn voorgesteld, maar een van hen werkte voor mij, althans niet volledig.

Wat heeft er feitelijk mijn fout opgelost om het onderstaande codefragment in de Vader HTML-tag van de elementen te schrijven.

Ik was gebonden aan de variabele.

Code:

   *ngIf="variable-name"

De fout werd veroorzaakt, blijkbaar doordat het project de pagina probeerde weer te geven, blijkbaar kon het project op het moment van evaluatie van de variabele de waarde niet vinden. Met het bovenstaande codefragment zorg je ervoor dat je, voordat je de pagina weergeeft, vraagt of de variabele is geïnitialiseerd.

Dit is mijn 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 is mijn html-opmaak:

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

Ik hoop dat dit nuttig kan zijn.


Antwoord 20

Heb je geprobeerd je [(ngModel)]te verplaatsen naar de divin plaats van de switchin je HTML? Ik had dezelfde fout in mijn code en het was omdat ik het model aan een <mat-option>bond in plaats van een <mat-select>. Hoewel ik geen formulierbeheer gebruik.


Antwoord 21

In mijn geval was het een component.member die niet bestond, bijvoorbeeld

[formControl]="personId"

Toevoegen aan de klassendeclaratie loste het op

this.personId = new FormControl(...)

Antwoord 22

In mijn geval werd de fout veroorzaakt door een import van een component in de module te dupliceren.


Antwoord 23

#Achtergrond

  • NativeScript 6.0

In mijn geval werd de fout veroorzaakt door het wijzigen van de elementtag van in door fout. Binnen <TextView an [(ngModel)]=”naam”. werd gedefinieerd.

Na het verwijderen van [(ngModel)]=”name” was de fout verdwenen.


Antwoord 24

Ik had dit probleem tijdens het uitvoeren van unit-tests. Om dit op te lossen heb ik de MatSlideToggleModule toegevoegd aan de imports in mijn spect.ts-bestand.


Antwoord 25

in mijn geval had ik een <textarea>-tag van oude html tijdens het converteren naar hoekig. Moest veranderen in <textarea>.

Other episodes