ERROR Error: Tidak ada pengakses nilai untuk kontrol formulir dengan atribut nama yang tidak ditentukan pada sakelar

96

Ini komponen saya di 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>
    `
} )

Ini kelas saya:

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

Ini adalah kesalahan yang saya dapatkan saat menyusun:

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)

Ketika saya mengubah sakelar elemen menjadi input, itu berfungsi, mengetahui bahwa saya menggunakan struktur yang sama ke komponen lain dan berfungsi dengan baik.

Menuntut
sumber
Ini mungkin dapat membantu Anda: stackoverflow.com/questions/46708080/…
Dinistro

Jawaban:

137

Saya memperbaiki kesalahan ini dengan menambahkan name="fieldName" ngDefaultControlatribut ke elemen yang membawa [(ngModel)]atribut tersebut.

Pierre-Alexis Ciavaldini
sumber
33
Beberapa penjelasan tambahan akan membuat ini menjadi jawaban yang lebih baik. Di mana Anda menemukan dokumentasi ngDefaultControl, misalnya?
Isherwood
9
Saya pikir name="fieldname"tidak perlu, tetapi ngDefaultControlmenyembuhkan masalah.
michaeak
3
Penjelasan lebih lanjut ada di sini. stackoverflow.com/questions/46465891/…
Saya nidhin
Menambahkan "ngDefaultControl" (pada atribut dengan direktif * ngFor) memecahkan masalah serupa saya.
Davidson Lima
86

Saya memiliki masalah yang sama dan masalahnya adalah komponen anak saya memiliki @inputnama formControl.

Jadi saya hanya perlu mengubah dari:

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

untuk:

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

ts:

@Input()
control:FormControl;
Eduardo Vargas
sumber
14
Penyelamat besar! Terima kasih, sangat sulit untuk melacak yang satu ini.
H Dog
4
Menghadapi masalah yang persis sama
Ahmad Baktash Hayeri
1
Punya masalah yang sama! terbuang sekitar 1 jam sebelum googling dan mendapatkan jawaban Anda. terima kasih
wmehanna
1
Wow, butuh waktu terlalu lama untuk menemukan solusi ini - terima kasih telah menjelaskannya dengan sangat jelas
Kabb5
Bekerja dengan Angular 10, seperti yang dikatakan dalam komentar sebelumnya, sangat sulit untuk melacak yang satu ini, namun, setelah itu, masuk akal bahwa "formControl" tidak boleh digunakan sebagai nama properti komponen @Input karena potensi konflik namespace , solusi penamaan lain dapat berupa mengganti nama bidang _formControl yang diberi makan oleh contoh FormControl.
Thomas
41

Saya juga menerima kesalahan ini saat menulis komponen kontrol formulir kustom di Angular 7. Namun, tidak ada jawaban yang berlaku untuk Angular 7.

Dalam kasus saya, berikut ini perlu ditambahkan ke @Componentdekorator:

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

Ini adalah kasus "Saya tidak tahu mengapa ini berhasil, tetapi berhasil." Kapur hingga desain / implementasi yang buruk pada bagian Angular.

theMayer
sumber
6
Cuplikan ini memberi tahu lapisan injeksi ketergantungan Angular bahwa kelas Anda harus dikembalikan ketika kelas lain (yaitu direktif formControlName) meminta token NG_VALUE_ACCESSOR. Tanpanya, angular tidak akan memiliki cara untuk mengetahui bahwa kelas Anda adalah kontrol bentuk kustom (semua info tentang antarmuka dll dihapus selama transpilasi)
Max Mumford
18

Saya juga mengalami kesalahan yang sama, sudut 7

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

Saya baru saja menambahkan ngDefaultControl

   <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
sumber
Terima kasih telah menyelamatkan hidup saya!
Varun Kumar
7

Saya mengalami kesalahan yang sama- Saya tidak sengaja mengikat [(ngModel)] ke saya mat-form-fieldalih - alih inputelemen.

Chris Fremgen
sumber
Punya masalah yang sama
Damith
6

Saya mendapatkan pesan kesalahan ini dalam tes Unit saya dengan Jasmine. Saya menambahkan atribut ngDefaultControl ke elemen khusus (dalam kasus saya itu adalah sakelar geser material sudut) dan ini menyelesaikan kesalahan.

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

Ubah elemen di atas untuk menyertakan atribut ngDefaultControl

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

Dalam kasus saya, saya telah memasukkan [(ngModel)] pada label daripada input. Ada juga peringatan, saya mencoba menjalankan dengan benar kesalahan di atas pada baris yang ditentukan tetapi kesalahan tidak mau pergi. Jika ada tempat lain di mana Anda telah melakukan kesalahan yang sama, Anda tetap mendapatkan kesalahan yang sama di baris yang sama

Nishanth Subramanya
sumber
1
Ini jawaban yang bagus. Beberapa komponen (pilih, radio, dll) Anda bisa tergelincir dan ngModel menempel di tempat yang salah seperti ini. Pesan kesalahan tidak banyak membantu.
AndrewBenjamin
5

Saya menghadapi kesalahan ini saat menjalankan kasus Karma Unit Test Menambahkan MatSelectModule dalam impor memperbaiki masalah

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],
Dan Patil
sumber
Hanya jika Anda telah menginstal "Angular Material", jika tidak, Anda tidak memerlukan ini.
Mikefox2k
3

Ini agak bodoh, tapi saya mendapat pesan kesalahan ini dengan tidak sengaja menggunakan, [formControl]bukan [formGroup]. Lihat disini:

SALAH

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

BAIK

@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
sumber
Ini juga untukku !! Sangat halus karena dokumen memberi saya kode yang saya gunakan.
Sankofa
2

Dalam kasus saya, saya menggunakan direktif, tetapi belum mengimpornya di file module.ts saya. Impor memperbaikinya.

Andris
sumber
Terima kasih, tetapi saya juga perlu memulai ulang ng serveuntuk menyegarkan impor
FindOutIslamNow
2

Saya mengalami kesalahan yang sama, saya memiliki bidang masukan yang dinamai controldi Komponen Formulir kustom saya tetapi secara tidak sengaja melewati kontrol dalam masukan bernama formControl. Semoga tidak ada yang menghadapi masalah itu.

Nikhil Arora
sumber
2

Dalam kasus saya, itu sama bodohnya dengan mendaftarkan komponen baru untuk DI dalam app.module.tsdeklarasi saya tetapi tidak dalam ekspor.

Wikooo
sumber
1

Dalam kasus saya, ini terjadi di modul bersama saya dan saya harus menambahkan yang berikut ini ke @NgModule:

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

Menghabiskan banyak waktu untuk membuatnya berhasil. Semoga ini membantu beberapa orang lain yang berjuang dengan kesalahan seperti itu.

Pei
sumber
0

Saya mengalami kesalahan yang sama, tetapi dalam kasus saya ternyata itu adalah masalah sinkronisasi, pada saat membuat komponen html.

Saya mengikuti beberapa solusi yang diusulkan di halaman ini tetapi salah satu dari mereka berhasil untuk saya, setidaknya tidak sepenuhnya.

Apa yang sebenarnya memecahkan kesalahan saya adalah menulis potongan kode di bawah ini di dalam tag html ayah dari elemen.

Saya mengikat variabel.

Kode:

    *ngIf="variable-name"

Kesalahan ini disebabkan, tampaknya oleh proyek yang mencoba merender laman, ternyata pada saat mengevaluasi variabel, proyek tidak dapat menemukan nilainya. Dengan potongan kode di atas Anda memastikan bahwa sebelum merender halaman Anda menanyakan apakah variabel telah diinisialisasi.

Ini adalah kode component.ts saya:

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

Ini markup html saya:

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

Semoga bermanfaat.

SENJATA NUKLIR
sumber
tautan ini memiliki masalah yang serupa :, stackoverflow.com/q/49409674/8992452 mungkin dapat membantu mengatasi masalah tersebut
NUKE
0

Sudahkah Anda mencoba memindahkan Anda [(ngModel)]ke divbukan switchdi HTML Anda? Saya memiliki kesalahan yang sama muncul di kode saya dan itu karena saya mengikat model ke a, <mat-option>bukan a <mat-select>. Meskipun saya tidak menggunakan kontrol bentuk.

mneumann.dll
sumber
0

Dalam kasus saya itu adalah komponen. Anggota yang tidak ada misalnya

[formControl]="personId"

Menambahkannya ke deklarasi kelas memperbaikinya

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

Dalam kasus saya, kesalahan dipicu dengan menduplikasi impor komponen dalam modul.

Aleks Grunwald
sumber
0

#Latar Belakang

  • NativeScript 6.0

Dalam kasus saya, kesalahan dipicu oleh perubahan tag elemen dari menjadi karena kesalahan. Di dalam <TextView an [(ngModel)] = "name". telah ditentukan.

Setelah menghapus [(ngModel)] = kesalahan "nama" hilang.

Chris S
sumber
-1

dalam kasus saya, saya memiliki <TEXTAREA>tag dari html lama saat mengonversi ke sudut. Harus berubah menjadi <textarea>.

Feng Zhang
sumber
Saya tidak memberi suara negatif, tetapi ini TIDAK PERNAH menjadi penyebabnya.
FindOutIslamNow