Angular中创建左右双表单控件并区分用户类型提交方案问询

问题背景 #

需要实现一个动态表单功能：

• 左右两个区域分别对应员工（emp）和用户（user）的问题
• 通过下拉选择问题类型（输入框/选择题），左右区域同步渲染对应控件
• 提交时每个问题需携带正确的ques_user_type标识，后端要求的数据结构如下：

{
  "questions": [
    {
      "id": null,
      "question": "test",
      "type_of_ques": "comment",
      "ques_user_type": "user",
      "placement": 1,
      "choices": [
        {
          "id": null,
          "choice": "1"
        }
      ]
    },
    {
      "id": null,
      "question": "test11",
      "type_of_ques": "dropdown",
      "ques_user_type": "emp",
      "placement": 1,
      "choices": [
        {
          "id": null,
          "choice": "2"
        }
      ]
    }
  ]
}

核心实现方案 #

通过拆分维护员工/用户侧的问题数组，在创建问题时直接绑定ques_user_type，确保提交时标识准确，同时共享选中的问题类型实现左右控件同步。

1. 定义数据接口 #

在组件中明确问题和选项的类型约束：

interface Choice {
  id: number | null;
  choice: string;
}

interface Question {
  id: number | null;
  question: string;
  type_of_ques: 'comment' | 'dropdown'; // 可扩展其他类型如radio
  ques_user_type: 'emp' | 'user';
  placement: number;
  choices: Choice[];
}

2. 组件状态管理 #

分别维护员工、用户的问题列表，以及当前选中的问题类型：

// 当前选中的问题类型，用于左右区域同步渲染
currentQuesType: 'comment' | 'dropdown' = 'comment';
// 员工侧问题列表，默认携带ques_user_type: 'emp'
empQuestions: Question[] = [];
// 用户侧问题列表，默认携带ques_user_type: 'user'
userQuestions: Question[] = [];

3. 同步问题类型选择 #

下拉选择控件绑定currentQuesType，左右区域根据该值渲染对应控件：

<div class="type-select">
  <label>选择问题类型：</label>
  <select [(ngModel)]="currentQuesType">
    <option value="comment">输入框</option>
    <option value="dropdown">选择题</option>
  </select>
</div>

4. 左右区域动态渲染表单 #

分别为员工区和用户区渲染表单，添加问题时自动注入对应的ques_user_type：

<!-- 左侧：员工问题区域 -->
<div class="section emp-section">
  <h3>员工端问题</h3>
  <button class="add-btn" (click)="addQuestion('emp')">添加新问题</button>
  <div *ngFor="let ques of empQuestions; let idx = index" class="question-item">
    <input 
      [(ngModel)]="ques.question" 
      placeholder="输入问题内容"
      class="question-input"
    >
    <!-- 选择题类型渲染选项 -->
    <div *ngIf="ques.type_of_ques === 'dropdown'" class="choices-container">
      <button (click)="addChoice(ques)" class="add-choice-btn">添加选项</button>
      <div *ngFor="let choice of ques.choices; let cIdx = index" class="choice-item">
        <input [(ngModel)]="choice.choice" placeholder="选项内容">
      </div>
    </div>
  </div>
</div>

<!-- 右侧：用户问题区域 -->
<div class="section user-section">
  <h3>用户端问题</h3>
  <button class="add-btn" (click)="addQuestion('user')">添加新问题</button>
  <div *ngFor="let ques of userQuestions; let idx = index" class="question-item">
    <input 
      [(ngModel)]="ques.question" 
      placeholder="输入问题内容"
      class="question-input"
    >
    <!-- 同步渲染选择题选项 -->
    <div *ngIf="ques.type_of_ques === 'dropdown'" class="choices-container">
      <button (click)="addChoice(ques)" class="add-choice-btn">添加选项</button>
      <div *ngFor="let choice of ques.choices; let cIdx = index" class="choice-item">
        <input [(ngModel)]="choice.choice" placeholder="选项内容">
      </div>
    </div>
  </div>
</div>

5. 实现添加问题/选项的逻辑 #

添加问题时自动设置ques_user_type和当前选中的类型，确保标识准确：

// 添加新问题
addQuestion(userType: 'emp' | 'user') {
  const newQues: Question = {
    id: null,
    question: '',
    type_of_ques: this.currentQuesType,
    ques_user_type: userType,
    placement: 1, // 可根据需求实现排序逻辑调整placement值
    choices: []
  };

  userType === 'emp' ? this.empQuestions.push(newQues) : this.userQuestions.push(newQues);
}

// 为选择题添加选项
addChoice(question: Question) {
  question.choices.push({ id: null, choice: '' });
}

6. 提交表单数据 #

合并员工和用户的问题数组，直接构造符合后端要求的 payload 提交：

submitForm() {
  // 合并两个区域的问题，可按需添加placement排序逻辑
  const allQuestions = [...this.empQuestions, ...this.userQuestions];
  const payload = { questions: allQuestions };

  // 调用HTTP请求提交到后端
  this.http.post('/your-api-endpoint', payload).subscribe({
    next: (res) => console.log('提交成功', res),
    error: (err) => console.error('提交失败', err)
  });
}

关键优势 #

• 类型标识准确：每个问题在创建时就绑定了对应的ques_user_type，从根源避免提交时混淆
• 同步渲染简单：通过共享currentQuesType实现左右区域控件类型同步，无需额外同步逻辑
• 数据结构清晰：拆分维护两个数组，便于后续扩展不同用户类型的专属逻辑

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