Question

我正在创建一个网站，其表单需要对外部支付提供商进行POST。但是，我需要通过我的组件代码来检查用户是否首先进行了身份验证。如果没有，我需要通过我的webapi更新值。收到响应后，我可以继续POST到外部URL。我的代码看起来像这样：

 onSubmit(form: any): void {  
         //for anonymous orders, we need to store the email before we send the form
         if(this.loggedIn){
            form.submit(); 
         }
         else{
             this.cartService.updateUserEmail(this.cart.id, this.email)
                             .subscribe(() => form.submit())
         }
  }

如果this.loggedIn为真，则POST正常工作。只有当我需要调用cartService时，form.submit才能正常工作。有时，控制台显示错误，“对象不包含方法submit（）”，其他时候，我在控制台中什么也得不到....它只是不起作用。

这是开场表格标签：

<form #cartForm="ngForm" (ngSubmit)="onSubmit(cartForm)" method="post" [action]="cart.paymentUrl" >

任何帮助都将不胜感激。

修改这是我的提交按钮的标记，按要求：

<button type="submit">CHECKOUT</button>

Answer 1

发送给您的事件处理程序的ngForm没有.submit()方法，因此您需要从form或ngForm获取基础event或.submit()，因此您可以使用其event方法。

对于此示例，我使用了 <form #cartForm="ngForm" (ngSubmit)="onSubmit(cartForm, $event)" method="post" [action]="cart.paymentUrl" >。

<强>标记

onSubmit(form: any, e: any): void {  
     //Note that I added 'e' and calling the event target's .submit()
     if(this.loggedIn){
        e.target.submit();
     }
     else{
         this.cartService.updateUserEmail(this.cart.id, this.email)
            .subscribe(() => {
                e.target.submit();
            })
     }
}

TS

console

我把它剥了一下，但这里有一个Working Plunker（＆＃34;工作＆＃34;如同，你会注意到失败的POST - 1秒后 - 在{{ 1}}由于跨域问题而导致www.google.com。）

Answer 2

你能尝试这种方式并告诉我它是否能解决你的问题吗？

模板：

<form (ngSubmit)="onSubmit()" #cartForm ="ngForm" >...</form>

组件：

@ViewChild('cartForm') cartForm: NgForm;

onSubmit() {  
         //for anonymous orders, we need to store the email before we send the form
         if(this.loggedIn){
            this.SomeService.create(this.cartForm.value, this.cart)
         }
         else{
             this.cartService.updateUserEmail(this.cart.id, this.email)
                             .subscribe(() => 
                                this.someService.create(this.cartForm.value, this.cart)
                             )
         }
  }

someService：

create(yourModel, cart): Observable<yourModel> {
    return this.http
      .post(cart.paymentUrl, JSON.stringify(yourModel), {headers: this.headers}) 
      .map(res => res.json())
      .catch(//handle errors);
  }

Angular表单不会发布到外部URL

2 个答案: