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

我想你错过了几件事.

我用上面给出的细节创建了一个stackblitz，它们很有效.

您还应该给<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();
  }