ERREUR Erreur: Aucune valeur accesseur pour le formulaire de contrôle de non précisée nom de l'attribut sur l'interrupteur

Im débutant à 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 je reçois 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)

Quand j'ai changer l'élément commutateur à l'entrée des œuvres, sachant que Im en utilisant la même structure à d'autres composants et il fonctionne très bien.

Merci.

InformationsquelleAutor Sue | 2017-09-26
  1. 29

    J'ai corrigé cette erreur en ajoutant le name="fieldName" ngDefaultControl attributs de l'élément qui porte l' [(ngModel)] attribut.

    InformationsquelleAutor Pierre-Alexis Ciavaldini
  2. 8

    J'ai aussi reçu ce message d'erreur lors de l'écriture d'un formulaire personnalisé de contrôle de la composante Angulaire 7. Cependant, aucune de ces réponses sont applicables aux Angulaire 7.

    Dans mon cas, la suite devait être ajouter à la @Component décorateur:

      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 il le fait." La craie jusqu'à une mauvaise conception/mise en œuvre sur la partie Angulaire.

    InformationsquelleAutor theMayer
  3. 5

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

    donc j'ai juste besoin de changer d':

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

    à:

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

    ts:

    @Input()
control:FormControl;
    InformationsquelleAutor Eduardo Vargas
  4. 4

    J'ai aussi eu la même erreur , angulaire 7

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

    J'ai juste ajouté ngDefaultControl

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

    • ngDefaultControl a fait le tour pour moi, merci
    InformationsquelleAutor Nadeem Qasmi
  5. 1

    C'est un peu stupide, mais j'ai ce message d'erreur par inadvertance en utilisant [formControl] au lieu de [formGroup]. Voir ici:

    MAL

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

    DROIT

    @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: ''
    })
  }
}
    InformationsquelleAutor Trevor
  6. 0

    J'ai eu ce même message d'erreur - j'ai accidentellement appliqué [(ngModel)] à mon mat-form-field au lieu de la input élément.

    InformationsquelleAutor Chris Fremgen