角料步进：错误：无法找到名称对照：“formArray”

Question

我试着与设置角料步进这里如何跟进步骤：https://material.angular.io/components/stepper/overview

我想有多个步骤，使一个简单的单一形式我创造了这个：

<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

我真的已经尽力遵循的文件，但我不明白我需要做什么来解决它......

Answer 1

那么，你的ngOnInit有这样的formgroup定义，

ngOnInit() { 
    this.formGroup = this._formBuilder.group({ 
    firstCtrl: ['', Validators.required] 
    }); 
} 

不具有formArray定义的，所以当你在你的模板是指formArrayName="formArray"应用程序将期待formArray控制你的父母formGroup声明formGroup内名为“formArray”（你的情况，从这些2个作业： - this.formGroup = ...和<form [formGroup]="formGroup">）。这解释了你解决你的问题的错误。但是你是否真的需要一个formArray，取决于你想要完成的事情，而且我认为就你的问题而言它并不重要。

此外，您似乎没有使用在您的模板中任何地方定义为firstCtrl的formControl。所以基本上你在你的组件中定义的反应形式（及其控件）与你的模板中的内容不匹配，除了父窗体组名称formGroup。

希望它有帮助。