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

如果您想使用包含多个步骤的单个表单，您需要在组件的打字稿中实现 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'。

1. 同时更新您的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.get([0]) 更改为 formArray?.get([0]) 和 formArray.get([1]) 更改为 formArray?.get([1])，因为 formArray 未定义。

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

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

Answer 2

嗯，你的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 名称 formGroup。

希望对你有帮助。