ERROR Error: no hay descriptor de acceso de valor para el control de formulario con un atributo de nombre no especificado en el conmutador

Aquí está mi componente en 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>
    `
} )

Aquí está mi clase:

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

Este es el error que obtengo al compilar:

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)

Cuando cambio el interruptor de elemento a entrada, funciona, sabiendo que estoy usando la misma estructura para otros componentes y funciona bien.

Solucioné este error agregando los name="fieldName" ngDefaultControlatributos al elemento que lleva el [(ngModel)]atributo.

Tuve el mismo problema y el problema fue que mi componente secundario tenía un @inputnombre formControl.

Así que solo necesitaba cambiar de:

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

a:

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

ts:

@Input()
control:FormControl;

También recibí este error al escribir un componente de control de formulario personalizado en Angular 7. Sin embargo, ninguna de las respuestas es aplicable a Angular 7.

En mi caso, era necesario agregar lo siguiente al @Componentdecorador:

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

Este es un caso de "No sé por qué funciona, pero funciona". Atribuya a un diseño / implementación deficiente por parte de Angular.

También tuve el mismo error, angular 7

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

Acabo de agregar ngDefaultControl

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

Tuve este mismo error: accidentalmente enlacé [(ngModel)] a mi en mat-form-fieldlugar del inputelemento.

Recibí este mensaje de error en mis pruebas unitarias con Jasmine. Añadí ngDefaultControl atributo al elemento de medida (en mi caso se trataba de un conmutador deslizante de material angular) y esto resuelve el error.

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

Cambie el elemento anterior para incluir el atributo ngDefaultControl

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

En mi caso, había insertado [(ngModel)] en la etiqueta en lugar de la entrada. También hay una advertencia, intenté ejecutar correctamente el error anterior en la línea especificada, pero el error no desapareció. Si hay otros lugares donde ha cometido el mismo error, todavía le arroja el mismo error en la misma línea.

Me enfrentaba a este error mientras ejecutaba los casos de prueba de la unidad de karma. Agregar MatSelectModule en las importaciones soluciona el problema

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

Esto es algo estúpido, pero recibí este mensaje de error al usar accidentalmente en [formControl]lugar de [formGroup]. Mira aquí:

INCORRECTO

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

CORRECTO

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

En mi caso, usé la directiva, pero no la había importado en mi archivo module.ts. Importar lo arregló.

Tuve este mismo error, tenía un campo de entrada nombrado controlen mi Componente de formulario personalizado pero accidentalmente pasaba el control en la entrada nombrada formControl. Espero que nadie enfrente ese problema.

En mi caso fue tan tonto como haber registrado el nuevo componente para DI en mis app.module.tsdeclaraciones pero no en las exportaciones.

En mi caso, está sucediendo en mi módulo compartido y tuve que agregar lo siguiente en @NgModule:

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

Pasé muchas horas para que funcionara. Espero que esto ayude a otros a luchar con ese error.

Tuve el mismo error, pero en mi caso aparentemente fue un problema de sincronización, al momento de renderizar los componentes en html.

Seguí algunas de las soluciones propuestas en esta página, pero ninguna me funcionó, al menos no del todo.

Lo que realmente resolvió mi error fue escribir el siguiente fragmento de código dentro de la etiqueta html padre de los elementos.

Estaba vinculando a la variable.

Código:

    *ngIf="variable-name"

El error fue causado, aparentemente porque el proyecto intentaba renderizar la página, aparentemente en el momento de evaluar la variable, el proyecto simplemente no pudo encontrar su valor. Con el fragmento de código anterior, asegúrese de que antes de renderizar la página pregunte si la variable se ha inicializado.

Este es mi código de component.ts:

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

Aquí está mi marcado html:

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

Espero que esto pueda ser de ayuda.

¿Ha intentado mover su [(ngModel)] a en divlugar de switchen su HTML? Tuve el mismo error en mi código y fue porque vinculé el modelo a un en <mat-option>lugar de a <mat-select>. Aunque no estoy usando el control de formulario.

En mi caso, era un componente. Miembro que no existía, por ejemplo

[formControl]="personId"

Agregarlo a la declaración de clase lo solucionó

this.personId = new FormControl(...)

En mi caso, el error se desencadenó al duplicar una importación de un componente en el módulo.

#Antecedentes

• NativeScript 6.0

En mi caso, el error se desencadenó al cambiar la etiqueta del elemento de a por error. Dentro de <TextView an [(ngModel)] = "nombre". Fue definido.

Después de eliminar [(ngModel)] = el error "nombre" desapareció.

en mi caso, tenía una <TEXTAREA>etiqueta de html antiguo mientras convertía a angular. Tuve que cambiar a <textarea>.