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

96

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.

demandar
fuente
1
lea aquí sobre ControlValueAccessor- Nunca más se confunda al implementar ControlValueAccessor en formas angulares
Max Koretskyi
Esto probablemente pueda ayudarlo: stackoverflow.com/questions/46708080/…
Dinistro

Respuestas:

137

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

Pierre-Alexis Ciavaldini
fuente
33
Alguna explicación adicional haría que esta sea una mejor respuesta. ¿Dónde encontraste documentación de ngDefaultControl, por ejemplo?
isherwood
9
Creo que name="fieldname"no es necesario, pero ngDefaultControlcura el problema.
michaeak
3
Más explicación está aquí. stackoverflow.com/questions/46465891/…
Soy nidhin
Agregar "ngDefaultControl" (en el atributo con la directiva * ngFor) resolvió un problema similar.
Davidson Lima
85

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;
Eduardo Vargas
fuente
14
¡Salvavidas enorme! Gracias, es muy difícil rastrear este.
H Dog
4
Enfrentó exactamente el mismo problema
Ahmad Baktash Hayeri
1
¡Tuve el mismo problema! desperdiciado alrededor de 1 hora antes de buscar en Google y llegar a su respuesta. gracias
wmehanna
1
Vaya, tomó demasiado tiempo encontrar esta solución, gracias por presentarla tan claramente
Kabb5
Funciona con Angular 10, como se dijo en un comentario anterior, es realmente difícil rastrear este, sin embargo, después, tiene sentido que "formControl" no deba usarse como un componente @Input nombre de propiedad debido a un posible conflicto de espacio de nombres , otra solución de nombres podría ser cambiar el nombre del campo _formControl que es alimentado por una instancia de FormControl.
Thomas
41

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.

theMayer
fuente
6
Este fragmento le dice a la capa de inyección de dependencia de Angular que su clase debe ser devuelta cuando otras clases (es decir, la directiva formControlName) le pidan el token NG_VALUE_ACCESSOR. Sin él, angular no tendría forma de saber que su clase es un control de formulario personalizado (toda la información sobre interfaces, etc. se elimina durante la transpilación)
Max Mumford
18

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

Nadeem Qasmi
fuente
¡Gracias por salvarme la vida!
Varun Kumar
7

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

Chris Fremgen
fuente
Tuve el mismo problema
Damith
6

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>
Sudharshan
fuente
5

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.

Nishanth Subramanya
fuente
1
Esta es una buena respuesta. Algunos componentes (selección, radio, etc.) se pueden deslizar y pegar el ngModel en el lugar equivocado como este. El mensaje de error no ayuda mucho.
AndrewBenjamin
5

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
      ],
Dan Patil
fuente
Solo si tiene instalado "Material angular"; de lo contrario, no lo necesita.
Mikefox2k
3

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: ''
    })
  }
}
Trevor
fuente
¡¡Esto también fue para mí !! Tan sutil porque los documentos me dieron el código con el que estoy trabajando.
Sankofa
2

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

Andris
fuente
Gracias, pero también necesitaba reiniciar ng servepara actualizar la importación
FindOutIslamNow
2

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.

Nikhil Arora
fuente
2

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

Wikooo
fuente
1

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.

Pei
fuente
0

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.

NUKE
fuente
este enlace tiene un problema similar:, stackoverflow.com/q/49409674/8992452 quizás pueda ayudar con el problema
NUKE
0

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

mneumann
fuente
0

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(...)
Stefan Michev
fuente
0

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

Aleks Grunwald
fuente
0

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

Chris S
fuente
-1

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

Feng Zhang
fuente
No voté en contra, pero esta NUNCA debería ser la causa.
FindOutIslamNow