HATA Hatası: Anahtardaki ad özniteliği belirtilmemiş form denetimi için değer erişimcisi yok

İşte Angular 4'teki bileşenim:

@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>
    `
} )

İşte sınıfım:

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

Bu, derlerken aldığım hata:

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)

Öğe anahtarını giriş olarak değiştirdiğimde, aynı yapıyı diğer bileşenlere kullandığımı ve iyi çalıştığını bilerek çalışıyor.

Bu hatayı, name="fieldName" ngDefaultControlözniteliği taşıyan öğeye öznitelikleri ekleyerek düzelttim [(ngModel)].

Aynı sorunu yaşadım ve sorun, çocuğumun bileşeninin bir @inputadının olmasıydı formControl.

Bu yüzden sadece şundan değiştirmem gerekiyor:

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

to:

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

ts:

@Input()
control:FormControl;

Bu hatayı Angular 7'de özel bir form denetimi bileşeni yazarken de aldım. Ancak yanıtların hiçbiri Angular 7 için geçerli değil.

Benim durumumda, aşağıdakilerin @Componentdekoratöre eklenmesi gerekiyordu :

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

Bu, "Neden işe yaradığını bilmiyorum ama işe yarıyor" durumudur. Angular'ın zayıf tasarımına / uygulamasına işaret edin.

Ben de aynı hatayı aldım, açısal 7

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

Sadece eklendi ngDefaultControl

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

Aynı hatayı aldım - yanlışlıkla [(ngModel)] öğesini öğe mat-form-fieldyerine kendime bağladım input.

Jasmine ile Birim testlerimde bu hata mesajını alıyordum. Özel öğeye ngDefaultControl özniteliğini ekledim (benim durumumda bu bir açısal malzeme kaydırma geçişiydi ) ve bu hatayı çözüyor .

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

Yukarıdaki öğeyi ngDefaultControl atttribute içerecek şekilde değiştirin

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

Benim durumumda, etikete giriş yerine [(ngModel)] ekledim. Ayrıca bir uyarı var, belirtilen satırda yukarıdaki hatayı doğru bir şekilde çalıştırmayı denedim ama hata gitmedi. Aynı hatayı yaptığınız başka yerler varsa, yine de aynı hatayı aynı satıra atar.

Ben ekleme Karma Birim Test vakaları çalıştırırken bu hatayı bakıyordu MatSelectModule ithalatı düzeltmeleri sorunu

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

Bu biraz aptalca, ancak bu hata mesajını yanlışlıkla [formControl]yerine kullanarak aldım [formGroup]. Buraya bakın:

YANLIŞ

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

SAĞ

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

Benim durumumda yönergeyi kullandım, ancak modül.ts dosyama aktarmadım. İçe aktarma sorunu çözdü.

Aynı hatayı aldım, controlözel Form Bileşenimde adlandırılan bir giriş alanı vardı, ancak yanlışlıkla adlandırılan girişte denetimi geçiyordum formControl. Umarım kimse bu sorunla yüzleşmez.

Benim durumumda benim DI'nin için yeni bir bileşen kayıtlı sahip olarak daft gibiydi app.module.tsbildirimleri ama değil ihracattaki.

Benim durumumda, paylaşılan modülümde oluyor ve aşağıdakileri @NgModule'a eklemem gerekiyor:

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

Çalışması için çok zaman harcadım. Umarım bu, bazılarının böyle bir hatayla mücadele etmesine yardımcı olur.

Aynı hatayı aldım, ancak benim durumumda, bileşenleri html oluşturma anında bir senkronizasyon sorunuydu.

Bu sayfada önerilen çözümlerden bazılarını takip ettim ama bunlardan herhangi biri benim için çalıştı, en azından tamamen değil.

Aslında hatamı çözen şey, aşağıdaki kod parçasını öğelerin baba html etiketinin içine yazmaktı.

Değişkene bağlanıyordum.

Kod:

    *ngIf="variable-name"

Hata, görünüşe göre, değişkeni değerlendirme anında proje, sayfayı oluşturmaya çalışan projeden kaynaklandı, proje değerini bulamadı. Yukarıdaki kod parçacığı ile, sayfayı oluşturmadan önce değişkenin başlatılıp başlatılmadığını sorduğunuzdan emin olun.

Bu benim component.ts kodum:

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

İşte html işaretlemem:

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

Umarım bu yardımcı olabilir.

Taşınma denediniz [(ngModel)]için divyerine switchHTML'nize? Kodumda aynı hatayı görüyordum ve bunun nedeni modeli a <mat-option>yerine a'ya bağlamamdı <mat-select>. Form kontrolü kullanmama rağmen.

Benim durumumda, mevcut olmayan bir component.memberdi, örn.

[formControl]="personId"

Sınıf bildirimine eklemek sorunu çözdü

this.personId = new FormControl(...)

Benim durumumda, hata, modüldeki bir bileşenin içe aktarılmasıyla tetiklendi.

#Arka fon

• NativeScript 6.0

Benim durumumda, hata, öğe etiketinin hatalı olarak değiştirilmesiyle tetiklendi. <TextView an [(ngModel)] = "name" içinde. tanımlandı.

Kaldırdıktan sonra [(ngModel)] = "isim" hatası gitti.

benim durumumda, <TEXTAREA>açılıya dönüştürürken eski html'den bir etiketim vardı . Olarak değiştirmek zorunda kaldı <textarea>.