Angular6表单配置action后无法向Servlet发起POST请求求助

看起来你遇到的核心问题是Angular表单指令和原生表单提交行为冲突，导致POST请求没有触发。我来帮你拆解问题并给出修复步骤：

1. 移除冲突的 ngNoForm 属性 #

你在表单上同时使用了 [formGroup]、(ngSubmit) 和 ngNoForm，这三个属性是互斥的：

• ngNoForm 的作用是告诉Angular不要接管这个表单，让浏览器按照原生HTML表单的逻辑处理提交
• 但你又用了Angular的响应式表单（formGroup）和提交事件（ngSubmit），这会导致Angular和浏览器的表单处理逻辑冲突，最终阻止了原生请求的发送

直接删除 ngNoForm，让Angular正常管理表单：

<form #reportForm (ngSubmit)="onSubmit()" [formGroup]="form" action="/hub/rpt/run" target="_blank" method="POST" >
  <!-- 表单内容 -->
</form>

2. 在 onSubmit() 中手动触发原生表单提交 #

Angular的 ngSubmit 事件默认会阻止原生表单的提交行为，所以你需要在组件的提交方法里，主动调用原生表单的submit()方法来发送POST请求：

组件代码： #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class ReportFormComponent {
  @ViewChild('reportForm') reportForm!: ElementRef<HTMLFormElement>;
  form!: FormGroup;
  reportParams: any[] = [];

  onSubmit() {
    if (this.form.valid) {
      // 触发原生表单提交，发送POST请求到Servlet
      this.reportForm.nativeElement.submit();
    }
  }
}

这里用 @ViewChild 获取表单的DOM引用，然后调用原生的submit()方法，确保请求能正常发送。

3. 确保表单控件有正确的 name 属性 #

原生表单提交要求所有需要提交的控件都必须有name属性，否则参数不会被序列化到请求中。检查你的 reporting-form-parameter 子组件，确保每个输入控件都绑定了对应的name：

子组件模板示例： #

<!-- 根据parameter的字段设置name和formControlName -->
<input 
  type="text" 
  [name]="parameter.name" 
  formControlName="{{parameter.name}}"
  [placeholder]="parameter.label"
/>

如果没有name属性，即使Angular表单验证通过，原生提交也不会携带这些参数，甚至可能导致请求无法正常触发。

4. 验证Servlet的表单参数处理逻辑 #

虽然你能通过REST API访问Servlet，但原生表单提交的是application/x-www-form-urlencoded格式的参数，而REST API通常用application/json。确保你的Servlet的doPost方法能正确处理这种格式：

Servlet代码示例： #

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取表单参数（根据你的parameter名称获取）
    String exampleParam = request.getParameter("exampleParamName");
    
    // 处理业务逻辑
    // ...
    
    // 跳转到目标页面或返回响应
    response.sendRedirect("/success-page");
}

额外测试建议 #

可以先写一个纯原生HTML表单（不带任何Angular指令）测试是否能成功提交到Servlet，排除Servlet端的配置问题：

<form action="/hub/rpt/run" target="_blank" method="POST">
  <input type="text" name="testParam" value="testValue">
  <button type="submit">Submit</button>
</form>

如果这个原生表单能正常发送请求，说明问题确实出在Angular的表单逻辑上，按照前面的步骤修复即可。

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