JHipster/Angular中创建Request时自动生成嵌套RequestPerson的实现方案

1. 前端Angular组件初始化嵌套对象及表单控件 #

在Request创建组件（request-create.component.ts）中，需要初始化Request对象的affectedPerson属性为空白对象，同时在表单组中添加对应的子控件组：

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

// ... 组件类内部
editForm!: FormGroup;
request: any = {};

ngOnInit(): void {
  this.initForm();
}

private initForm(): void {
  // 初始化Request对象，包含空白的RequestPerson
  this.request = {
    description: '',
    affectedPerson: { firstName: '', lastName: '' }
  };

  // 构建表单组，包含affectedPerson的子控件
  this.editForm = this.fb.group({
    id: [],
    description: [this.request.description, [Validators.required]],
    affectedPerson: this.fb.group({
      firstName: [this.request.affectedPerson.firstName, [Validators.required]],
      lastName: [this.request.affectedPerson.lastName, [Validators.required]]
    })
  });
}

2. 调整表单模板的绑定结构 #

将RequestPerson的字段包裹在formGroupName="affectedPerson"容器中，简化表单控件绑定路径，避免找不到控件的问题：

<!-- 原有的description字段保持不变 -->
<div class="form-group">
  <label class="form-label" for="field_description">Description</label>
  <input
    id="field_description"
    data-cy="description"
    type="text"
    class="form-control"
    name="description"
    formControlName="description"
  />
  <!-- 错误提示可保留 -->
</div>

<!-- 添加RequestPerson的字段组 -->
<div formGroupName="affectedPerson" class="mt-3">
  <h6>Affected Person</h6>
  <div class="form-group">
    <label class="form-label" for="field_affectedPerson_firstName">First Name</label>
    <input
      id="field_affectedPerson_firstName"
      data-cy="affectedPerson.firstName"
      type="text"
      class="form-control"
      name="affectedPerson.firstName"
      formControlName="firstName"
    />
    <div *ngIf="editForm.get('affectedPerson.firstName')!.invalid && (editForm.get('affectedPerson.firstName')!.dirty || editForm.get('affectedPerson.firstName')!.touched)">
      <small class="form-text text-danger">First Name is required.</small>
    </div>
  </div>

  <div class="form-group">
    <label class="form-label" for="field_affectedPerson_lastName">Last Name</label>
    <input
      id="field_affectedPerson_lastName"
      data-cy="affectedPerson.lastName"
      type="text"
      class="form-control"
      name="affectedPerson.lastName"
      formControlName="lastName"
    />
    <div *ngIf="editForm.get('affectedPerson.lastName')!.invalid && (editForm.get('affectedPerson.lastName')!.dirty || editForm.get('affectedPerson.lastName')!.touched)">
      <small class="form-text text-danger">Last Name is required.</small>
    </div>
  </div>
</div>

3. 后端实体添加级联保存配置 #

为了确保保存Request时自动保存关联的RequestPerson，在Request实体的@OneToOne注解上添加cascade = CascadeType.ALL：

import javax.persistence.CascadeType;
import javax.persistence.OneToOne;
import javax.persistence.JoinColumn;

// Request实体类内部
@OneToOne(cascade = CascadeType.ALL)
@JoinColumn(name = "request_person_id") // 根据你的数据库外键字段调整
private RequestPerson affectedPerson;

4. 验证提交逻辑 #

提交表单时，Angular会将表单值（包含完整的affectedPerson对象）作为RequestDTO传给后端，后端通过已修改的RequestMapper将DTO映射为实体，再通过级联配置自动保存RequestPerson。

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