Angular MatTabGroup：如何自动将一个标签页的表单内容复制到另一个

思路一：共用同一个表单控制对象（推荐） #

既然两个标签页的表单结构完全一致，直接让它们绑定同一个FormControl或FormGroup是最省心的方案——Angular会自动同步所有控件的状态和值，不用额外写同步逻辑。

组件代码示例 #

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

@Component({
  selector: 'app-tab-form',
  templateUrl: './tab-form.component.html',
  styleUrls: ['./tab-form.component.css']
})
export class TabFormComponent {
  // 创建一个共用的表单组
  preferenceForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.preferenceForm = this.fb.group({
      namePreference: ['firstName'] // 设置默认选中值
    });
  }
}

模板代码示例（两个标签页复用同一表单组） #

<!-- 标签页1的表单 -->
<mat-tab label="标签页1">
  <mat-radio-group aria-label="Select an option" [formGroup]="preferenceForm" formControlName="namePreference">
    <mat-radio-button class="radio-box" value="firstName">Firstname</mat-radio-button>
    <mat-radio-button class="radio-box" value="lastName">Last name</mat-radio-button>
  </mat-radio-group>
</mat-tab>

<!-- 标签页2的表单 -->
<mat-tab label="标签页2">
  <mat-radio-group aria-label="Select an option" [formGroup]="preferenceForm" formControlName="namePreference">
    <mat-radio-button class="radio-box" value="firstName">Firstname</mat-radio-button>
    <mat-radio-button class="radio-box" value="lastName">Last name</mat-radio-button>
  </mat-radio-group>
</mat-tab>

只要在任意一个标签页选择选项，另一个标签页的单选框会自动同步选中状态，因为它们绑定的是同一个表单控件。

思路二：监听表单值变化手动同步 #

如果因为业务限制不能共用表单对象，可以通过监听其中一个表单的valueChanges事件，手动把值同步到另一个表单。如果需要双向同步，就同时监听两个表单的变化。

组件代码示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-tab-form',
  templateUrl: './tab-form.component.html',
  styleUrls: ['./tab-form.component.css']
})
export class TabFormComponent implements OnInit, OnDestroy {
  tab1Form: FormGroup;
  tab2Form: FormGroup;
  private destroy$ = new Subject<void>();

  constructor(private fb: FormBuilder) {
    // 分别创建两个表单组
    this.tab1Form = this.fb.group({
      namePreference: ['firstName']
    });
    this.tab2Form = this.fb.group({
      namePreference: ['firstName']
    });
  }

  ngOnInit(): void {
    // 监听标签页1的表单值变化，同步到标签页2
    this.tab1Form.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        // emitEvent设为false，避免同步时触发标签页2的valueChanges导致循环更新
        this.tab2Form.patchValue(value, { emitEvent: false });
      });

    // 如果需要双向同步，再监听标签页2的变化同步到标签页1
    this.tab2Form.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        this.tab1Form.patchValue(value, { emitEvent: false });
      });
  }

  ngOnDestroy(): void {
    // 销毁订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

模板代码示例 #

<!-- 标签页1的表单 -->
<mat-tab label="标签页1">
  <mat-radio-group aria-label="Select an option" [formGroup]="tab1Form" formControlName="namePreference">
    <mat-radio-button class="radio-box" value="firstName">Firstname</mat-radio-button>
    <mat-radio-button class="radio-box" value="lastName">Last name</mat-radio-button>
  </mat-radio-group>
</mat-tab>

<!-- 标签页2的表单 -->
<mat-tab label="标签页2">
  <mat-radio-group aria-label="Select an option" [formGroup]="tab2Form" formControlName="namePreference">
    <mat-radio-button class="radio-box" value="firstName">Firstname</mat-radio-button>
    <mat-radio-button class="radio-box" value="lastName">Last name</mat-radio-button>
  </mat-radio-group>
</mat-tab>

内容的提问来源于stack exchange，提问作者Dos_kid