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"时，应用程序会在您的父formGroup中声明名为'formArray'的formArray控件声明为formGroup（在您的情况下，来自这两项任务： - this.formGroup = ...和<form [formGroup]="formGroup">）。这解释了您回答问题的错误。但是你真的需要一个formArray，这取决于你想要完成的事情，而且就你的问题而言，我认为这并不重要。

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

希望它有所帮助。

Answer 2

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

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

也如下所示更新您的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])。

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

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

Angular material stepper：错误：无法找到名称为：'formArray'的控件

2 个答案: