web-dev-qa-db-fra.com

ERROR Error: Aucun accesseur de valeur pour le contrôle de formulaire avec l'attribut de nom non spécifié sur le commutateur

Je suis débutant chez angular4, voici mon composant:

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

Voici ma classe:

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

C'est l'erreur que j'obtiens lors de la compilation:

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)

Lorsque je modifie le commutateur d’élément en entrée, cela fonctionne, sachant que j’utilise la même structure pour d’autres composants et que cela fonctionne bien.

Je vous remercie.

angularform-control
8
Sue

J'ai corrigé cette erreur en ajoutant les attributs name="fieldName" ngDefaultControl à l'élément portant l'attribut [(ngModel)].

15
Pierre-Alexis Ciavaldini

J'ai eu le même problème et le problème était que mon composant enfant avait une entrée nommée formControl. 

donc je devais juste changer de:

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

à:

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

ts:

@Input()
control:FormControl;
1
Eduardo Vargas

J'ai également reçu cette erreur lors de l'écriture d'un composant de contrôle de formulaire personnalisé dans Angular 7. Cependant, aucune des réponses ne s'applique à Angular 7.

Dans mon cas, il fallait ajouter les éléments suivants au décorateur @Component:

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

C'est un cas de "Je ne sais pas pourquoi cela fonctionne, mais c'est le cas". Cela peut être attribué à une mauvaise conception/mise en œuvre de la part de Angular.

0
theMayer

C'est un peu stupide, mais j'ai reçu ce message d'erreur en utilisant accidentellement [formControl] au lieu de [formGroup]. Vois ici:

FAUX

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup">
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

DROITE

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formGroup]="formGroup">
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}
0
Trevor