angular2在打字稿中提交表格

时间:2017-04-20 11:36:12

标签: forms angular firefox typescript cross-browser

我需要提交一份来自支付网关的表格。我们的后端人员要求我放置innerHtml并在渲染后发送。我得到它在chrome上工作,但在firefox上失败了。现在我试图在我们的测试环境中修复它,后端添加了我需要的所有属性的JSON返回来复制他发送给我的表单,这样我就可以创建自己的表单了。但仍未能在firefox上提交。

有人有同样的经历吗?请告诉我一些事情。

我需要知道哪些firefox特定修补程序?

以下是chrome和safari的工作代码

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef,DoCheck, ViewChildren, QueryList } from '@angular/core';
import { BrowserModule, DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';
import { PaymentService } from '../../_services/payment.service';
import { Loader } from '../../_services/loader.service';

@Component({
  selector: 'bdf-payment-form',
  templateUrl: './payment-form.component.html',
  styleUrls: ['./payment-form.component.scss']
})
export class PaymentFormComponent implements OnInit,DoCheck, AfterViewInit  {

  form : SafeResourceUrl;
  // @ViewChild('paymentFormContainer') container: ElementRef;
  @ViewChild('paymentForm') myForm: ElementRef;
  loader;
  constructor(private paymentService:PaymentService,
    private sanitizer: DomSanitizer,
    private loaderService: Loader,
    private elRef:ElementRef) { }

  ngDoCheck(){

  }
  ngOnInit() {
    console.log(this.paymentService.paymentForm);
    this.paymentService.paymentForm ? this.form = this.sanitizer.bypassSecurityTrustHtml(this.paymentService.paymentForm) : null
    this.loader = true;
  }

  ngAfterViewInit() {
    let test;
    if(this.form){ 
      test = this.elRef.nativeElement.querySelector('form')
      console.log(test)
      test.submit();
    }

  }

}

1 个答案:

答案 0 :(得分:0)

您不应使用submit()方法来避免重定向页面刷新。

http服务用于从表单提交序列化为json的表单数据。如果您将表单元素绑定到模型,那么将模型发送回后端会更容易。