角材料步进器：错误：找不到名称为“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

我的测试的完整源代码在这里：github上的angular stepper test example

我真的尽力遵循文档，但我不明白我需要做什么来修复它......

Answer 1

嗯，你的ngOnInitformgroup 定义是这样的，

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

它没有formArray定义，因此当您在模板中引用时，formArrayName="formArray"应用程序将期望formArray在您的父 formGroup 中声明一个名为“formArray”的控件formGroup（在您的情况下，来自这两个分配：-this.formGroup = ...和<form [formGroup]="formGroup">）。这解释了您回答问题时所犯的错误。但是你真的需要一个 formArray 取决于你想要完成什么，我认为就你的问题而言这并不重要。

另外，您似乎没有使用firstCtrl模板中任何地方定义的 formControl 。因此，本质上，您在组件中定义为反应式表单（及其控件）的内容与模板中的内容不匹配，除了父 formGroup name 之外formGroup。

希望能帮助到你。