Angular 13组件间共享响应式表单解决方案咨询

针对你需要在两个路由组件间共享同一个表单控件的场景，ViewChild失效是因为两个组件属于独立的路由节点，并非父子嵌套关系，无法通过该方式跨组件获取表单。下面是两种可行的实现方案，推荐使用第一种：

方案一：通过单例服务共享表单（最推荐） #

创建一个全局单例服务来托管表单实例，两个组件都注入该服务，直接使用同一套表单控件，实现数据实时同步。

1. 创建表单服务 #

生成一个UserFormService，在其中初始化包含所有字段的FormGroup：

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

@Injectable({
  providedIn: 'root' // 全局单例
})
export class UserFormService {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化完整表单，包含手机号、邮箱和地址子表单
    this.userForm = this.fb.group({
      phone: [''],
      email: [''],
      address: this.fb.group({
        province: [''],
        city: [''],
        street: ['']
      })
    });
  }

  // 可选：封装保存逻辑
  saveAddress() {
    // 这里可以添加API调用等保存操作
    this.userForm.markAsPristine(); // 标记表单为未修改状态
  }
}

2. 首页组件（展示手机号、邮箱和地址预览） #

注入服务，绑定表单控件，地址部分直接读取服务中表单的地址值，编辑按钮跳转到地址编辑页：

import { Component } from '@angular/core';
import { UserFormService } from './user-form.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {
  // 快捷获取表单控件
  get phoneControl() {
    return this.userFormService.userForm.get('phone');
  }

  get emailControl() {
    return this.userFormService.userForm.get('email');
  }

  get address() {
    return this.userFormService.userForm.get('address')?.value;
  }

  constructor(
    public userFormService: UserFormService,
    private router: Router
  ) {}

  goToEditAddress() {
    this.router.navigate(['/edit-address']);
  }
}

模板：

<form [formGroup]="userFormService.userForm">
  <div>
    <label>手机号:</label>
    <input formControlName="phone" type="tel">
  </div>
  <div>
    <label>邮箱:</label>
    <input formControlName="email" type="email">
  </div>
</form>

<div class="address-preview">
  <h3>用户地址</h3>
  <p>{{ address.province }} {{ address.city }} {{ address.street }}</p>
  <button (click)="goToEditAddress()">编辑地址</button>
</div>

3. 地址编辑组件 #

同样注入服务，直接绑定地址子表单，保存后返回首页：

import { Component } from '@angular/core';
import { UserFormService } from './user-form.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-edit-address',
  templateUrl: './edit-address.component.html'
})
export class EditAddressComponent {
  // 获取地址子表单
  get addressForm() {
    return this.userFormService.userForm.get('address') as FormGroup;
  }

  constructor(
    public userFormService: UserFormService,
    private router: Router
  ) {}

  saveAddress() {
    this.userFormService.saveAddress();
    this.router.navigate(['/profile']);
  }
}

模板：

<form [formGroup]="addressForm">
  <div>
    <label>省份:</label>
    <input formControlName="province">
  </div>
  <div>
    <label>城市:</label>
    <input formControlName="city">
  </div>
  <div>
    <label>街道:</label>
    <input formControlName="street">
  </div>
  <button (click)="saveAddress()">保存</button>
</form>

方案二：通过路由状态传递表单数据（适合非实时同步场景） #

如果不需要实时同步表单状态，也可以在跳转编辑页时传递当前表单值，编辑完成后返回时携带更新后的地址数据，再更新首页的表单。

这种方式需要在路由跳转时通过state传递数据：

// 首页跳转编辑页
goToEditAddress() {
  this.router.navigate(['/edit-address'], {
    state: { address: this.address }
  });
}

编辑页读取路由状态并处理：

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

@Component({
  selector: 'app-edit-address',
  templateUrl: './edit-address.component.html'
})
export class EditAddressComponent {
  addressForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private router: Router,
    private route: ActivatedRoute
  ) {
    // 读取路由状态中的地址数据
    const address = this.route.snapshot.state?.address;
    this.addressForm = this.fb.group(address || {});
  }

  saveAddress() {
    // 返回首页并携带更新后的地址
    this.router.navigate(['/profile'], {
      state: { updatedAddress: this.addressForm.value }
    });
  }
}

首页在初始化时读取路由状态更新表单：

ngOnInit() {
  const updatedAddress = this.route.snapshot.state?.updatedAddress;
  if (updatedAddress) {
    this.userFormService.userForm.patchValue({ address: updatedAddress });
  }
}

内容的提问来源于stack exchange，提问作者Jorge Luiz Rodrigues