如何在Angular中用表单A的值填充表单B的字段？

问题场景 #

我是Angular新手，需要实现：formA里formControlName="case1"的textarea值，自动同步到formB里formControlName="comments"的textarea中。

现有代码 #

formA.html

<div class="row">
  <div class="col-sm-3">
     <span class="col-sm-12">Statement1: </span>
   </div>
   <div class="col-sm-9">
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label> Statements </mat-label>
      <textarea spellcheck="true" matInput placeholder="" formControlName="case1" cols="100" rows="10"></textarea>
      </mat-form-field>
    </div>
</div>

formB.html

<div class="row">
  <div class="col-sm-3">
     <span class="col-sm-12">comments: </span>
   </div>
   <div class="col-sm-9">
      <mat-form-field class="example-full-width" appearance="outline">
      <mat-label> comment# </mat-label>
      <textarea spellcheck="true" matInput placeholder="" formControlName="comments" cols="100" rows="10">  this has to be the value thats in form A statement 1 field.</textarea>
      </mat-form-field>
    </div>
</div>

解决方案 #

根据组件间的关系，推荐三种常用实现方式：

方案1：共享服务（通用所有组件关系） #

这是最灵活的方式，不管两个组件是不是父子、有没有路由跳转都能用。

1. 创建共享数据服务

新建form-data.service.ts，用BehaviorSubject存储和监听值变化：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FormDataService {
  // 初始化空值，BehaviorSubject会保留最新值
  private case1Value$ = new BehaviorSubject<string>('');
  // 对外暴露可观察对象，避免外部修改源数据
  public case1ValueObs$ = this.case1Value$.asObservable();

  // 更新值的方法
  updateCase1Value(value: string): void {
    this.case1Value$.next(value);
  }
}

2. 在FormA组件监听输入变化，同步到服务

在FormA的ts文件里，订阅case1控件的变化，把值传给服务：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { FormDataService } from './form-data.service';

@Component({
  selector: 'app-form-a',
  templateUrl: './formA.html'
})
export class FormAComponent implements OnInit {
  formA!: FormGroup;

  constructor(private formDataService: FormDataService) {}

  ngOnInit(): void {
    // 初始化表单
    this.formA = new FormGroup({
      case1: new FormControl('')
    });

    // 监听case1的输入变化，实时同步到服务
    this.formA.get('case1')?.valueChanges.subscribe(value => {
      this.formDataService.updateCase1Value(value);
    });
  }
}

3. 在FormB组件订阅服务值，同步到comments控件

在FormB的ts文件里，订阅服务的可观察对象，把值设置到comments控件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { FormDataService } from './form-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-form-b',
  templateUrl: './formB.html'
})
export class FormBComponent implements OnInit, OnDestroy {
  formB!: FormGroup;
  private valueSub!: Subscription;

  constructor(private formDataService: FormDataService) {}

  ngOnInit(): void {
    // 初始化表单
    this.formB = new FormGroup({
      comments: new FormControl('')
    });

    // 订阅服务的值变化，同步到comments控件
    this.valueSub = this.formDataService.case1ValueObs$.subscribe(value => {
      // emitEvent设为false，避免触发自身的valueChanges循环
      this.formB.get('comments')?.setValue(value, { emitEvent: false });
    });
  }

  // 组件销毁时取消订阅，防止内存泄漏
  ngOnDestroy(): void {
    this.valueSub.unsubscribe();
  }
}

方案2：父子组件直接传值（FormA是FormB父组件） #

如果FormB是FormA的子组件，直接用@Input传递值更简单：

1. 父组件（FormA）模板传值

在formA.html里引入FormB时，绑定case1的值：

<app-form-b [syncComments]="formA.get('case1')?.value"></app-form-b>

2. 子组件（FormB）接收并同步

在FormB的ts文件里用@Input接收值，并用ngOnChanges实时同步：

import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form-b',
  templateUrl: './formB.html'
})
export class FormBComponent implements OnInit, OnChanges {
  @Input() syncComments!: string;
  formB!: FormGroup;

  ngOnInit(): void {
    this.formB = new FormGroup({
      comments: new FormControl(this.syncComments)
    });
  }

  // 监听输入属性变化，实时更新
  ngOnChanges(): void {
    this.formB.get('comments')?.setValue(this.syncComments, { emitEvent: false });
  }
}

方案3：路由跳转传参（从FormA页面跳转到FormB页面） #

如果是通过路由跳转打开FormB，用路由参数传递值：

1. FormA组件跳转时带参数

在FormA的跳转方法里，把case1的值作为query参数传递：

import { Router } from '@angular/router';

// 假设点击按钮触发跳转
navigateToFormB(): void {
  const case1Val = this.formA.get('case1')?.value;
  this.router.navigate(['/form-b'], { queryParams: { comments: case1Val } });
}

2. FormB组件获取参数并赋值

在FormB的ts文件里，从路由中获取参数并设置到comments控件：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-form-b',
  templateUrl: './formB.html'
})
export class FormBComponent implements OnInit {
  formB!: FormGroup;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.formB = new FormGroup({
      comments: new FormControl('')
    });

    // 获取路由参数，同步到控件
    this.route.queryParams.subscribe(params => {
      const commentVal = params['comments'];
      if (commentVal) {
        this.formB.get('comments')?.setValue(commentVal);
      }
    });
  }
}

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