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

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.

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

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;

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.

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

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

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>

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

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

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

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

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

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.

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

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.

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.

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.

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

[formControl]="personId"

Menambahkannya ke deklarasi kelas memperbaikinya

this.personId = new FormControl(...)

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

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

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