Angular 5中带Action的简单表单无法正常工作

这个问题很典型——Angular会自动把模板里的<form>元素当成Angular模板驱动表单来处理，默认拦截原生的submit事件，用来执行Angular的表单验证、数据绑定等逻辑，这就导致你设置的action和method完全不生效，而普通HTML里没有这个拦截机制，所以表单能正常提交。

下面是几种快速解决的方案，你可以根据自己的需求选择：

方案一：禁用Angular表单处理（最简单） #

给表单添加ngNoForm属性，告诉Angular不要对这个表单应用任何Angular表单逻辑，完全使用原生HTML表单的行为：

<form ngNoForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
  <input name='storeId' value='4950'>
  <input name='amount' value='1000'>
  <input name='postBackURL' value='https://easypaystg.easypaisa.com.pk/easypay/Confirm.jsf'>
  <input name='orderRefNum' value='123113'>
  <input name='merchantHashedReq' value='6ohsP8x3PpiaI4oNirWGwjVkyMLP4CbzcH6pZwvu9SViOzx9nLxyR/TtJhwFrxBU686Wf1z22G+TBxuo5QkSscuXp266qQWx8AbGWnLXxG79LHt+5VlD+lH2JkjKO997adwVHH6mGNm8ldtAKkRyf/E92QF5PwhWMjq8i4dlbABIjJxnwPS3x13R/Nbfmlugkz7XpX20DmZ0IhPuGBR95sOpDATIjfW51fuStCVVni4='>
  <input name='autoRedirect' value='0'>
  <input name='paymentMethod' value='CC_PAYMENT_METHOD'>
  <input name='emailAddr' value='johndoe@live.com'>
  <input name='mobileNum' value='0123455500'>
  <button type="submit" class="btn btn-success">Submit</button>
  <input type='submit' value='asdasd' class="btn">
</form>

这个方案适合你不需要Angular表单功能（比如验证、双向绑定）的场景，直接用原生表单提交到第三方接口。

方案二：保留Angular逻辑，手动触发原生提交 #

如果你需要在提交前执行一些Angular的业务逻辑（比如校验数据、修改参数），然后再触发原生表单提交，可以这么做：

模板代码： #

给表单添加模板引用变量（比如#nativeForm），并绑定ngSubmit事件：

<form #nativeForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post' (ngSubmit)="handleNativeSubmit(nativeForm)">
  <!-- 表单内容不变 -->
  <input name='storeId' value='4950'>
  <input name='amount' value='1000'>
  <!-- ...其他input -->
  <button type="submit" class="btn btn-success">Submit</button>
</form>

组件代码（.ts文件）： #

添加处理方法，手动调用原生表单的submit()方法：

handleNativeSubmit(form: HTMLFormElement) {
  // 这里可以添加你的Angular逻辑，比如修改amount的值、校验手机号等
  // form.querySelector('[name="amount"]')?.setAttribute('value', '1500');
  
  // 触发原生提交
  form.submit();
}

方案三：内联处理提交事件 #

如果逻辑很简单，也可以直接在模板里内联处理，阻止Angular的默认行为后手动提交：

<form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post' (submit)="$event.preventDefault(); $event.target.submit();">
  <!-- 表单内容不变 -->
  ...
</form>

额外提示 #

如果你的表单参数是动态生成的（比如amount、orderRefNum来自组件数据），建议使用Angular的属性绑定语法[value]，比如：

<input name='amount' [value]="orderAmount">

这样能确保参数值和组件数据实时同步。

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