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


104

これがAngular4の私のコンポーネントです:

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

要素スイッチを入力に変更すると、他のコンポーネントと同じ構造を使用していて正常に機能することがわかっているので、機能します。



これはおそらくあなたを助けることができます。stackoverflow.com/questions/46708080/...
Dinistro

回答:


153

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


34
いくつかの追加の説明はこれをより良い答えにするでしょう。ngDefaultControlたとえば、のドキュメントはどこにありますか?
isherwood 2018年

16
name="fieldname"必要ないと思いますがngDefaultControl、問題は解決します。
michaeak

6
詳細な説明はこちらです。stackoverflow.com/questions/46465891/...
私はnidhinてる

(* ngForディレクティブを持つ属性に) "ngDefaultControl"を追加すると、同様の問題が解決しました。
デビッドソンリマ

2
私の場合、フォームグループで使用される要素(AngularEditorModuleなど)のモジュールパッケージをインポートしてテンプレート内のコントロールを認識し、ngDefaultControlがそれにアクセスできるようにすることで、これを修正しました。ユニットテストをしているときに発見しました。
aj go

101

同じ問題が発生しました。問題は、子コンポーネントに@input名前が付いていることformControlでした。

だから私はただから変更する必要がありました:

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

に:

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

ts:

@Input()
control:FormControl;

1
前のコメントで述べたように、Angular 10で動作しますが、これを追跡するのは非常に困難ですが、その後、名前空間の競合が発生する可能性があるため、「formControl」をコンポーネントの@Inputプロパティ名として使用しないでください。 、別の命名ソリューションは、FormControlインスタンスによって供給されるフィールド_formControlの名前を変更することです。
トーマス

41

Angular 7でカスタムフォームコントロールコンポーネントを作成しているときにもこのエラーが発生しました。ただし、Angular7にはどの回答も当てはまりません。

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

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

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


6
このスニペットは、他のクラス(つまり、formControlNameディレクティブ)がトークンNG_VALUE_ACCESSORを要求したときに、クラスが返される必要があることをAngularの依存性注入レイヤーに通知します。それがなければ、角度は(インタフェースなどに関するすべての情報がtranspilation時に取り除かれる)あなたのクラスは、カスタムフォームのコントロールであることを知る方法はありません
マックス・マンフォード

19

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


8

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


7

Jasmineを使用したユニットテストでこのエラーメッセージが表示されていました。カスタム要素にngDefaultControl属性を追加しました(私の場合は角度のあるマテリアルスライドトグルでした)。これでエラーが解決します。

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

上記の要素を変更して、ngDefaultControlatttributeを含めます

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

6

Karmaユニットテストケースの実行中にこのエラーに直面していましたインポートにMatSelectModuleを追加すると、問題が修正されます

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

「AngularMaterial」がインストールされている場合のみ、それ以外の場合は必要ありません。
Mikefox2k

5

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


1
これは良い答えです。一部のコンポーネント(選択、ラジオなど)は、このようにngModelを滑らせて間違った場所に貼り付ける可能性があります。エラーメッセージはあまり役に立ちません。
AndrewBenjamin

5

これはちょっとばかげていますが、の[formControl]代わりに誤って使用してこのエラーメッセージを受け取りました[formGroup]。ここを参照してください:

違う

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

正しい

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

3

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


ありがとうございますがng serve、インポートを更新するために再起動する必要もありました
FindOutIslamNow 2010年

2

これと同じエラーcontrolが発生しましたformControl。カスタムフォームコンポーネントで名前が付けられた入力フィールドがありましたが、誤ってという名前の入力で制御を渡していました。誰もその問題に直面しないことを願っています。


2

私の場合、DIの新しいコンポーネントをapp.module.ts宣言に登録したのと同じくらい巧妙でしたが、エクスポートには登録していませんでした。


2

私の場合、それは私の共有モジュールで起こっており、@ NgModuleに以下を追加する必要がありました。

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

2

コンポーネント入力の1つに「formControl」という名前を付けたときにもこのエラーが発生しました。おそらくそれは何か他のもののために予約されています。コンポーネント間でFormControlオブジェクトを渡したい場合は、次のように使用します。

@Input() control: FormControl;

このようではありません:

@Input() formControl: FormControl;

奇妙な-しかし働いている:)


0

同じエラーが発生しましたが、私の場合は、コンポーネントをhtmlにレンダリングした時点で、同期の問題であったようです。

私はこのページで提案された解決策のいくつかに従いましたが、少なくとも完全には機能しませんでした。

私のエラーを実際に解決したのは、要素の父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">
             ...

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


このリンクにも同様の問題があります:、stackoverflow.com
q / 49409674/8992452

0

HTMLので[(ngModel)]divなくに移動してみましたswitchか?コードに同じエラーが表示されましたが、これはモデルをの<mat-option>代わりににバインドしたため<mat-select>です。フォームコントロールは使用していませんが。


0

私の場合、それは存在しなかったcomponent.memberでした。

[formControl]="personId"

クラス宣言に追加すると修正されました

this.personId = new FormControl(...)

0

私の場合、モジュール内のコンポーネントのインポートを複製することでエラーが発生しました。


0

#バックグラウンド

  • NativeScript 6.0

私の場合、エラーは要素タグをエラーによってからに変更することによってトリガーされました。<TextView内[(ngModel)] = "name"。定義されました。

[(ngModel)] = "name"を削除した後、エラーはなくなりました。


0

ユニットテストの実行中にこの問題に直面していました。修正するために、spect.tsファイルのインポートにMatSlideToggleModuleを追加しました。


-1

私の場合、<TEXTAREA>Angularに変換しているときに古いhtmlのタグがありました。に変更する必要がありました<textarea>


私は反対票を投じませんでしたが、これが原因になることは決してありません。
FindOutIslamNow
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.