2017-10-11 4 views
2

https://material.angular.io/components/stepper/overview角度素材ステッパー:エラー:名前のコントロールを見つけることができません:「formArray」私はここにセットアップの角度材料ステッパー方法についての手順をフォローアップしてみました

が、私はそう複数のステップを持つ単純な単一のフォームを望んでいました私は私のコンソール上で取得

<form [formGroup]="formGroup"> 
    <mat-horizontal-stepper formArrayName="formArray" linear> 
    <mat-step formGroupName="0" [stepControl]="formArray.get([0])"> 
     <div> 
     <button mat-button matStepperNext type="button">Next</button> 
     </div> 
    </mat-step> 
    <mat-step formGroupName="1" [stepControl]="formArray.get([1])"> 
     <div> 
     <button mat-button matStepperPrevious type="button">Back</button> 
     <button mat-button matStepperNext type="button">Next</button> 
     </div> 
    </mat-step> 
    </mat-horizontal-stepper> 
</form> 

:私はこれを作成し

ERROR Error: Cannot find control with name: 'formArray' 
    at _throwError (forms.es5.js:1918) 
    at setUpFormContainer (forms.es5.js:1891) 
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addFormArray (forms.es5.js:4849) 
    at FormArrayName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormArrayName.ngOnInit (forms.es5.js:5134) 
    at checkAndUpdateDirectiveInline (core.es5.js:10856) 
    at checkAndUpdateNodeInline (core.es5.js:12364) 
    at checkAndUpdateNode (core.es5.js:12303) 
    at debugCheckAndUpdateNode (core.es5.js:13167) 
    at debugCheckDirectivesFn (core.es5.js:13108) 
    at Object.eval [as updateDirectives] (MystepperComponent.htm 

私のテストの完全なソースコードはここにある:angular stepper test example on github

私は本当にドキュメントに従うことが私のベストを尽くしたが、私はそれを修正するために何をする必要があるか理解していない...

答えて

2

さて、あなたngOnInitは、このようなformgroup定義を持つ、

formArrayが定義されていないので、あなたがあなたのテンプレートで formArrayName="formArray"を参照するときアプリがこれら2つの割り当てから命名「formArray」formGroupが formGroupとして宣言され、あなたの親の中に(あなたのケースで formArray制御を、期待しています
ngOnInit() { 
    this.formGroup = this._formBuilder.group({ 
    firstCtrl: ['', Validators.required] 
    }); 
} 

: - this.formGroup = ...および<form [formGroup]="formGroup">)。それはあなたの質問に答えなければならないエラーを説明しています。しかし実際にはあなたが成し遂げようとしていることに依存してformArrayが実際に必要ですか?あなたの質問が重要であるとは思わない。

また、テンプレートのどこにでもfirstCtrlとして定義されているformControlを使用しているようではありません。したがって、あなたの反応型(およびそのコントロール)としてあなたのコンポーネントで定義したものは、親フォームグループ名formGroupだけを除いてテンプレートにあるものと一致しません。

希望します。

+0

ありがとう、クールで複雑な:)私は完全にformArray、formGroupを削除してみようと思っています。 – Jas

+0

がすべて削除されました。formGroup formArray formArrayName Ctrlおよびすべてが機能しています。おかげさまで、この例に従おうとしていただけです... – Jas

+0

Cool。ハッピーラーニング! – amal

関連する問題