web-dev-qa-db-ja.com

エラーエラー：スイッチ上の名前属性が指定されていないフォームコントロールの値アクセサがありません

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

これが私のクラスです：

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

これは、コンパイル時に表示されるエラーです。

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)

要素スイッチを入力に変更すると、他のコンポーネントに同じ構造を使用していることを認識して動作し、正常に動作します。

angularform-control
26
Sue

name="fieldName" ngDefaultControl属性を[(ngModel)]属性を持つ要素に追加することにより、このエラーを修正しました。

38
Pierre-Alexis Ciavaldini

Angular 7でカスタムフォームコントロールコンポーネントを記述しているときにもこのエラーを受け取りました。ただし、Angular 7に該当する回答はありません。

私の場合、以下を@Componentデコレーターに追加する必要がありました。

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

これは、「なぜ機能するのかわかりませんが、機能します」というケースです。 Angular側の設計/実装が不十分な場合は、それをチョークしてください。

17
theMayer

私は同じ問題を抱えていましたが、問題は、子コンポーネントにformControlという名前の@inputがあったことです。

だから私はちょうどから変更する必要がありました：

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

に：

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

ts：

@Input()
control:FormControl;
7
Eduardo Vargas

私も同じエラーがありました、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>

ngDefaultControlを追加しました

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

これは一種の愚かですが、誤って[formControl]の代わりに[formGroup]を使用してこのエラーメッセージを受け取りました。こちらをご覧ください：

間違った

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

右

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

私の場合、ディレクティブを使用しましたが、module.tsファイルにインポートしていませんでした。インポートはそれを修正しました。

0
Andris

同じエラーが発生しましたが、私の場合、コンポーネントhtmlをレンダリングする時点で、明らかに同期化の問題でした。私はこのページで提案された解決策のいくつかに従いましたが、それらのいずれかが少なくとも完全には機能しませんでした。実際に私のエラーを解決したのは、変数にバインドしていたelementosのfather htmlタグ内に以下のコードスニペットを書くことでしたコード：

    *ngIf="variable-name"

エラーが発生したのは、明らかに、ページをレンダリングしようとしているプロジェクトが、変数を評価する瞬間に、プロジェクトがその値を見つけることができなかったためです。上記のコードを使用して、ページをレンダリングする前に変数が初期化されているかどうかを尋ねることをシュアします。

これは私の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));
    });
  }
      ...

ここに私の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">
             ...

これが役に立てば幸いです。

0
NUKE

私の場合、入力ではなくラベルに[（ngModel）]を挿入しました。警告もあります。指定された行で上記のエラーを正しく実行した後、実行しようとしましたが、エラーは発生しませんでした。同じ間違いを犯した場所が他にある場合でも、同じ行に同じエラーがスローされます

0
Nishanth Subramanya

これと同じエラーが発生しました。誤って[（ngModel）]をinput要素ではなくmat-form-fieldにバインドしました。

0
Chris Fremgen