Angular5中基于所选用户类型提交对应响应式表单数据

嘿，我来帮你搞定这个问题！你已经有了包含所有公共和专属字段的User模型，现在要实现的是根据选中的用户类型（教师/学生/监护人），只提交对应的数据对象对吧？下面是一套实用的实现方案：

1. 梳理字段映射，明确各用户类型的专属字段 #

首先，我们定义一个对象来维护不同用户类型对应的允许提交字段，后续新增用户类型时只需要扩展这个对象就行，扩展性拉满：

// 组件内的私有属性，维护各用户类型的字段列表
private userTypeAllowedFields = {
  Teacher: ['name', 'address', 'subject', 'teacherId'], // 公共字段+教师专属
  Student: ['name', 'address', 'studentId', 'grade'],   // 公共字段+学生专属
  Guardian: ['name', 'address', 'wardName', 'relation'] // 公共字段+监护人专属
};

2. 构建包含所有字段的响应式表单 #

在组件的ngOnInit里初始化表单，把所有公共和专属字段都加进去，后续我们会通过动态验证和提交过滤来处理：

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

// 组件类内的属性
userForm: FormGroup;
selectedUser: string; // 绑定到下拉框的用户类型

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.userForm = this.fb.group({
    name: ['', Validators.required],
    address: ['', Validators.required],
    // 以下是各用户类型的专属字段
    subject: [''],
    teacherId: [''],
    studentId: [''],
    grade: [''],
    wardName: [''],
    relation: ['']
  });
}

对应的模板里，下拉框绑定selectedUser，还可以根据用户类型切换显示对应专属字段（提升用户体验）：

<!-- 用户类型选择下拉框 -->
<select [(ngModel)]="selectedUser" name="userType" required>
  <option value="">请选择用户类型</option>
  <option value="Teacher">教师</option>
  <option value="Student">学生</option>
  <option value="Guardian">监护人</option>
</select>

<!-- 公共字段 -->
<input formControlName="name" placeholder="姓名">
<input formControlName="address" placeholder="地址">

<!-- 教师专属字段（用*ngIf控制显示） -->
<input *ngIf="selectedUser === 'Teacher'" formControlName="subject" placeholder="教授科目">
<input *ngIf="selectedUser === 'Teacher'" formControlName="teacherId" placeholder="教师ID">

<!-- 学生专属字段 -->
<input *ngIf="selectedUser === 'Student'" formControlName="studentId" placeholder="学生ID">
<input *ngIf="selectedUser === 'Student'" formControlName="grade" placeholder="年级">

<!-- 监护人专属字段 -->
<input *ngIf="selectedUser === 'Guardian'" formControlName="wardName" placeholder="被监护人姓名">
<input *ngIf="selectedUser === 'Guardian'" formControlName="relation" placeholder="关系">

<button (click)="submit()" [disabled]="!userForm.valid || !selectedUser">提交</button>

3. 提交时过滤数据，只保留当前用户类型的字段 #

在submit方法里，我们先获取表单的所有值，然后根据selectedUser对应的字段列表过滤出需要的数据，再构造User实例或者直接提交过滤后的对象：

submit() {
  // 先校验表单有效性和用户类型是否选中
  if (!this.selectedUser || !this.userForm.valid) {
    alert('请填写完整信息并选择用户类型');
    return;
  }

  const formFullData = this.userForm.value;
  // 过滤出当前用户类型允许提交的字段
  const filteredData = Object.keys(formFullData)
    .filter(key => this.userTypeAllowedFields[this.selectedUser].includes(key))
    .reduce((result, key) => {
      result[key] = formFullData[key];
      return result;
    }, {} as Partial<User>);

  // 如果你需要创建User实例，用Object.assign来赋值（前提是User的字段可访问）
  const targetUser = Object.assign(new User(), filteredData);

  // 调用服务提交数据到后端
  // this.userService.submitUser(targetUser).subscribe(
  //   res => console.log('提交成功', res),
  //   err => console.error('提交失败', err)
  // );
}

4. 可选优化：动态设置表单验证规则 #

为了让表单验证更精准，我们可以监听用户类型的变化，动态给对应专属字段添加必填验证：

import { Subscription } from 'rxjs';

// 组件内新增属性
private userTypeChangeSub: Subscription;

ngOnInit() {
  // ... 表单初始化代码 ...

  // 监听用户类型变化，动态调整验证规则
  this.userTypeChangeSub = this.userForm.get('userType')?.valueChanges.subscribe(userType => {
    // 先清除所有专属字段的验证规则
    ['teacherId', 'subject', 'studentId', 'grade', 'wardName', 'relation'].forEach(key => {
      this.userForm.get(key)?.clearValidators();
      this.userForm.get(key)?.updateValueAndValidity();
    });

    // 根据选中的用户类型添加对应字段的必填验证
    switch(userType) {
      case 'Teacher':
        this.userForm.get('teacherId')?.setValidators(Validators.required);
        this.userForm.get('subject')?.setValidators(Validators.required);
        break;
      case 'Student':
        this.userForm.get('studentId')?.setValidators(Validators.required);
        this.userForm.get('grade')?.setValidators(Validators.required);
        break;
      case 'Guardian':
        this.userForm.get('wardName')?.setValidators(Validators.required);
        this.userForm.get('relation')?.setValidators(Validators.required);
        break;
    }

    // 更新表单验证状态
    this.userForm.updateValueAndValidity();
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.userTypeChangeSub?.unsubscribe();
}

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