带有 Action 的 Angular 5 简单表单不起作用

Posted 2023-03-05

【中文标题】带有 Action 的 Angular 5 简单表单不起作用

【英文标题】：Angular 5 simple form with Action is not working

【发布时间】：2018-10-25 05:13:55

【问题描述】：

下面给出的代码在我的 angular html 文件中不起作用，但如果我在 html 文件中单独使用此代码，它可以工作，我不知道我做错了什么，这只是一个简单的形式。

<form 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='[e-mail]'>
    <input  name='mobileNum' value='0123455500'>
    <button type="submit" class="btn btn-success" >Submit</button>
    <input type='submit' value='asdasd' class="btn">
</form>

【问题讨论】：

您使用的是哪个版本的 Angular？

我的 Angular 5 和 cli 1.6

这能回答你的问题吗？ Angular 5 default form submit

这能回答你的问题吗？ Can't submit HTML form inside Angular 2 application

【参考方案1】：

您可以通过以下方式进行：

<form #form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
    ...
    <button type="submit" class="btn btn-success" (click)="form.submit()">Submit</button>
    ...
</form>

【讨论】：

@HaroonAslam 太好了，在这种情况下你可以接受答案:)

我会在 8 分钟内完成

表单正在提交但没有值

@DhireshBudhiraja 确保您的输入具有name 属性。你可以分享 stackblitz，我会检查的。

这在 Angular 10 中不起作用，并且会在控制台中产生 javascript 错误。

【参考方案2】：

直接发布表单会导致页面重新加载，这通常不是您在 Angular 应用程序 (SPA) 中想要的。从表单中获取数据，然后将 HTTP 请求从您的代码发送到服务器。

您应该利用 NgSubmit 指令，如 here 所述

【讨论】：

是的，但在某些情况下您不希望出现 CORS 错误

【参考方案3】：

使用ngNoForm 属性as documented。这将阻止所有“神奇”的 Angular 行为，并且您将能够以本机方式提交表单（页面重新加载）。

所以类似于：

<form ngNoForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
    <input  name='storeId' value='4950'>
    ...
    <input type='submit' value='asdasd' class="btn">
</form>