角材料步进器：错误：找不到名称为'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具有这样的表单组定义，

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

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

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

希望有帮助。

Answer 2

如果要使用具有多个步骤的单个表单，则需要在组件的打字稿中实现formGroup和formArray。对于您的问题，看来您尚未在组件的打字稿文件中实现formArray。如下修改您的代码以使其起作用。

1. [stepper.component.ts应该看起来如下图。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css']
})

export class StepperComponent implements OnInit {

  formGroup: FormGroup;
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({}),
        this._formBuilder.group({})
      ])
    });
  }
}

数组中的两个this._formbuilder.group({})用于formArray->'0'和formArray->'1'。

2. 也如下所示更新stepper.component.html。

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

由于未定义formArray，我将formArray.get([0])更改为formArray?.get([0])，将formArray.get([1])更改为formArray?.get([1])。

3. 确保已在app.module.ts中导入了所有必需的依赖项。

您可以在给定的链接上找到有效的解决方案-https://stackblitz.com/edit/angular-xuofwu