Angular 5中两个表单通过共用ngModel实现数据共享的方法咨询

绝对可以！用Angular的ngModel来实现两个表单共同字段的实时同步是非常直观的方案，本质就是让两个表单的相同字段绑定到组件里的同一个数据对象，这样数据会在两个表单间自动同步，不用额外写同步逻辑。

具体实现步骤 #

1. 在组件类中定义共享的数据对象

首先在你的组件.ts文件里创建一个用来存储表单数据的对象，把两个表单的共同字段和各自独有的字段都包含进去：

import { Component } from '@angular/core';

@Component({
  selector: 'app-form-switcher',
  templateUrl: './form-switcher.component.html',
  styleUrls: ['./form-switcher.component.css']
})
export class FormSwitcherComponent {
  // 共享的数据对象，包含共同字段和独有字段
  formData = {
    // 共同字段
    username: '',
    email: '',
    phone: '',
    // form1独有字段
    address: '',
    // form2独有字段
    company: ''
  };

  // 控制当前显示的表单
  activeForm: 'form1' | 'form2' = 'form1';
}

2. 在模板中实现表单切换和ngModel绑定

然后在HTML模板里，用导航按钮切换activeForm的值，两个表单的共同字段都绑定到formData的同一属性：

<!-- 导航按钮 -->
<button (click)="activeForm = 'form1'" [class.active]="activeForm === 'form1'">表单1</button>
<button (click)="activeForm = 'form2'" [class.active]="activeForm === 'form2'">表单2</button>

<!-- 表单1 -->
<div *ngIf="activeForm === 'form1'">
  <h3>表单1</h3>
  <div>
    <label>用户名：</label>
    <input type="text" [(ngModel)]="formData.username" name="username">
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" [(ngModel)]="formData.email" name="email">
  </div>
  <div>
    <label>电话：</label>
    <input type="tel" [(ngModel)]="formData.phone" name="phone">
  </div>
  <div>
    <label>地址：</label>
    <input type="text" [(ngModel)]="formData.address" name="address">
  </div>
</div>

<!-- 表单2 -->
<div *ngIf="activeForm === 'form2'">
  <h3>表单2</h3>
  <div>
    <label>用户名：</label>
    <input type="text" [(ngModel)]="formData.username" name="username">
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" [(ngModel)]="formData.email" name="email">
  </div>
  <div>
    <label>电话：</label>
    <input type="tel" [(ngModel)]="formData.phone" name="phone">
  </div>
  <div>
    <label>公司：</label>
    <input type="text" [(ngModel)]="formData.company" name="company">
  </div>
</div>

3. 关键注意点

• 因为两个表单的共同字段都绑定到formData的同一个属性，所以不管在哪个表单里修改这些字段的值，另一个表单切换过来时都会自动显示最新的值，完全不用手动写同步逻辑。
• 每个绑定ngModel的输入框都要设置唯一的name属性，这是Angular模板驱动表单的硬性要求。
• 如果你的表单需要复杂验证或更严谨的状态管理，也可以结合FormGroup来实现，核心思路还是共享同一个数据源，不过ngModel对于简单场景已经足够好用。

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