Angular 材步进机: Error: Cannot find control with name: 'formArray'

我试图按照以下有关如何设置 Angular 材步进机的步骤进行操作: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

我确实竭尽全力按照文档进行操作，但是我不明白我需要做些什么来对其进行修复...

最佳答案

好吧，您的ngOnInit具有这样的表单组定义，

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

它没有定义formArray，因此当您在模板中引用formArrayName="formArray"时，应用程序将期望在父formGroup中声明为formArray的名为'formArray'的formGroup控件(在您的情况下，来自这两个分配:-this.formGroup = ...和<form [formGroup]="formGroup"> )。这说明了您必须回答问题的错误。但是您实际上是否需要一个formArray取决于您要完成的工作，就您的问题而言，我认为这并不重要。

而且，您似乎在模板的任何地方似乎都没有使用定义为firstCtrl的formControl。因此，从本质上讲，您在组件中定义为响应式表单(及其控件)的内容与模板中的内容不符，只是父表单组名称formGroup除外。

希望能帮助到你。

关于 Angular 材步进机: Error: Cannot find control with name: 'formArray' ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46689176/