Angular通用共享组件结构设计：多组件复用差异化表单问询

核心思路 #

通过**输入属性（@Input）**传递差异化配置，结合条件渲染控制字段显示/隐藏，同时利用表单组动态生成控件，实现通用字段+差异化字段的复用表单结构。

具体实现步骤 #

1. 创建共享表单组件 #

新建SharedFormComponent，作为通用表单载体，通过@Input接收父组件的差异化配置和初始数据。

组件代码示例

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

// 定义差异化配置接口，按需扩展
interface FormConfig {
  showEmployeeField: boolean;
  showCustomerField: boolean;
}

@Component({
  selector: 'app-shared-form',
  template: `
    <form [formGroup]="form">
      <!-- 通用字段 -->
      <div class="form-group">
        <label>用户名</label>
        <input formControlName="username" type="text" class="form-control">
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input formControlName="email" type="email" class="form-control">
      </div>

      <!-- 组件A专属字段 -->
      <div *ngIf="config.showEmployeeField" class="form-group">
        <label>员工编号</label>
        <input formControlName="employeeId" type="text" class="form-control">
      </div>

      <!-- 组件B专属字段 -->
      <div *ngIf="config.showCustomerField" class="form-group">
        <label>客户等级</label>
        <select formControlName="customerLevel" class="form-control">
          <option value="1">普通</option>
          <option value="2">VIP</option>
          <option value="3">至尊</option>
        </select>
      </div>

      <button type="button" (click)="onSubmit()" class="btn btn-primary">提交</button>
    </form>
  `
})
export class SharedFormComponent implements OnInit {
  @Input() config: FormConfig;
  @Input() initialData: Record<string, any> = {};
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化通用表单控件
    const controlMap = {
      username: [this.initialData.username || ''],
      email: [this.initialData.email || '']
    };

    // 根据配置添加差异化控件
    if (this.config.showEmployeeField) {
      controlMap['employeeId'] = [this.initialData.employeeId || ''];
    }
    if (this.config.showCustomerField) {
      controlMap['customerLevel'] = [this.initialData.customerLevel || '1'];
    }

    this.form = this.fb.group(controlMap);
  }

  onSubmit(): void {
    console.log('表单提交数据:', this.form.value);
    // 可通过@Output将提交事件传递给父组件处理差异化逻辑
  }
}

2. 父组件调用共享表单 #

在两个不同的业务组件（如EmployeeComponent和CustomerComponent）中，分别传递对应配置和初始数据。

员工组件调用示例

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

@Component({
  selector: 'app-employee',
  template: `
    <h3>员工信息表单</h3>
    <app-shared-form 
      [config]="{ showEmployeeField: true, showCustomerField: false }"
      [initialData]="{ username: '张三', email: 'zhangsan@corp.com', employeeId: 'EMP-007' }"
    ></app-shared-form>
  `
})
export class EmployeeComponent {}

客户组件调用示例

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

@Component({
  selector: 'app-customer',
  template: `
    <h3>客户信息表单</h3>
    <app-shared-form 
      [config]="{ showEmployeeField: false, showCustomerField: true }"
      [initialData]="{ username: '李四', email: 'lisi@client.com', customerLevel: '2' }"
    ></app-shared-form>
  `
})
export class CustomerComponent {}

3. 点击切换差异化内容 #

若需通过点击事件动态切换字段显示/数据，只需在父组件中修改config或initialData，Angular变更检测会自动更新共享表单。

点击切换示例（员工组件内）

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

@Component({
  selector: 'app-employee',
  template: `
    <h3>员工信息表单</h3>
    <button (click)="toggleEmployeeField()" class="btn btn-secondary mb-3">
      {{ showEmployeeId ? '隐藏员工编号' : '显示员工编号' }}
    </button>
    <app-shared-form 
      [config]="formConfig"
      [initialData]="formData"
    ></app-shared-form>
  `
})
export class EmployeeComponent {
  showEmployeeId = true;
  formConfig = { showEmployeeField: true, showCustomerField: false };
  formData = { username: '张三', email: 'zhangsan@corp.com', employeeId: 'EMP-007' };

  toggleEmployeeField(): void {
    this.showEmployeeId = !this.showEmployeeId;
    this.formConfig.showEmployeeField = this.showEmployeeId;
    // 同步更新数据
    if (!this.showEmployeeId) {
      delete this.formData.employeeId;
    } else {
      this.formData.employeeId = 'EMP-007';
    }
  }
}

进阶优化建议 #

• 若差异化字段数量多，可将配置改为字段元数据数组，通过*ngFor动态渲染所有字段，减少重复*ngIf代码。
• 使用@Output将表单提交事件传递给父组件，让父组件处理不同业务的提交逻辑。
• 结合ControlValueAccessor将共享表单封装为自定义表单控件，可直接集成到父组件的表单组中，提升复用性。

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