在一个组件中创建多个表单

Question

我正在尝试在一个组件中创建多个表单。我试图用 mat-tab-groups

来实现这个

<mat-tab-group>
  <mat-tab label="form1">
    <form>...</form>
  </mat-tab>
  <mat-tab label="form2">
    <form>...</form>
  </mat-tab>
</mat-tab-group>

我有这些在 ts 中创建表单的函数：

createForm1(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}
createForm2(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}

我在构造函数中调用了这个函数：

constructor(some dependencies){
  this.createForm1;
  this.createForm2;
}

但是，当调用 createForm2() 时，它崩溃了。如果我更改顺序，则会创建 form2 而 form1 会崩溃。错误是 ERROR Error: Cannot find control with name: someField.

我猜错误与选项卡有关（只能创建活动选项卡的形式），但我不知道如何解决。

更多信息

在 html 中，通过以下方式访问控件：

<div class="form-group"><input type="number" formControlName="field1" class="form-control"/></div>
<div class="form-group"><input type="number" formControlName="field2" class="form-control"/></div>

Answer 1

我认为您遗漏了几件事。

我使用上面给出的详细信息创建了一个 stackblitz，它们起作用了。 https://stackblitz.com/edit/angular-4y6edt

您还应该给 <form> [formGroup] 以告诉它绑定到相关的表单组。

 <form [formGroup]="form1">
      <div class="form-group">
        <input type="number" formControlName="field1" class="form-control" />
      </div>
      <div class="form-group">
        <input type="number" formControlName="field2" class="form-control" />
      </div>
    </form>
  </mat-tab>
  <mat-tab label="form2">
    <form [formGroup]="form2">
      <div class="form-group">
        <input type="number" formControlName="field1" class="form-control" />
      </div>
      <div class="form-group">
        <input type="number" formControlName="field2" class="form-control" />
      </div>
    </form>

在您的 .ts 组件中，您将同一个组件初始化两次：

createForm1(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}
createForm2(){
  this.form = this.formBuilder.group({
    field1: [''],
    field2: [''],
    ...
  })
}

你应该有两个不同的 formGroups 即 form1 和 form2，像这样：

 createForm1() {
    this.form1 = this.formBuilder.group({
      field1: [''],
      field2: [''],
    });
  }
  createForm2() {
    this.form2 = this.formBuilder.group({
      field1: [''],
      field2: [''],
    });
  }

最后在构造函数中这样调用它们：

 constructor(private formBuilder: FormBuilder) {
    this.createForm1();
    this.createForm2();
  }

在一个组件中创建多个表单

Create many forms in one component

angular

forms

angular-formbuilder

mat-tab