Angular 4アプリ内で従来のフォームをiframeに投稿する方法

Question

Angular 4アプリ内から従来のフォーム投稿をiframeに挿入しようとしていますが、単に新しいタブに投稿しています。私は他の何かを行う必要があることを仮定しているので、私は、フォーム要素にngNoFormを追加するまで、私はトラブルのすべてのフォームを掲示していた私のformタグがどのように見える（多分iframe要素には？）：

<form 
    ngNoForm 
    method="POST" 
    action="http://some.url" 
    target="responseFrame" 
    > 

マイiframeタグは次のようになります。

<iframe id="responseFrame" name="responseFrame" src=""></iframe> 

Answer 1

更新：このplunkerを見てください。 demoEndpointの値を、コンポーネントの目的のエンドポイントに置き換える必要があります。テンプレートのフォームアクション属性もdemoEndpointと一致する必要があります。私はこのコードを、私の開発エンドポイントをdemoEndpoint値とフォームアクション属性の値に置き換えるという唯一の区別でテストし、正しく動作します。 https://plnkr.co/edit/NAJPfFyulzEQFtR01OML?p=info

// start: safe-resource-url.pipe.ts 

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 

@Pipe({ name: 'safeResourceUrl' }) 
export class SafeResourceUrlPipe implements PipeTransform { 

    constructor(private domSanitizer: DomSanitizer) { } 

    transform(url) { 
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
} 
// end: safe-resource-url.pipe.ts 

// start: home.component.ts 
import { Component, ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit, AfterViewInit { 
    @ViewChild('form') postForm: ElementRef; 
    private a_field: any; 
    private b_field: any; 
    private c_field: any; 
    private show_form: any; 
    private demoEndpoint: any; 
    private reqBody: any; 

    constructor(private http: Http) { 
    this.demoEndpoint = 'https://example.com/demoEndpoint'; /* this would be the url that you load with the iframe, that is also the value in the action field on the form to be issued in the post request */ 
    this.a_field = 'value a'; 
    this.b_field = 'value b'; 
    this.c_field = 'value c'; 
    this.show_form = 'PAYMENT_FORM'; 

    this.reqBody = new FormData(); 
    this.reqBody.append('a_field', this.a_field); 
    this.reqBody.append('b_field', this.b_field); 
    this.reqBody.append('c_field', this.c_field); 
    this.reqBody.append('show_form', this.show_form); 
    } 

    ngOnInit() { 
    /* too early to issue http post to the iFrame loaded from this.demoEndpoint */ 
    } 

    ngAfterViewInit() { 
    console.log('ngAfterViewInit trigger'); 
    this.postForm.nativeElement.submit(); 
    } 

    submitForm($event): boolean { 
    $event.stopPropagation(); 
    this.http.post(this.demoEndpoint, this.reqBody); 
    console.log(this.reqBody); 
    return true; 
    } 

    onLoad() { 
    console.log('onLoad triggered.'); 
    } 
} 
// end: home.component.ts 

// start: home.component.html 
<iframe class="custom-frame" #frame width="400" height="400" id="frame" name="frame" frameborder="0" [src]="demoEndpoint | safeResourceUrl" (load)="onLoad()"></iframe> 

<!-- The form is hidden on purpose and demonstrates automatically posting the form data to the endpoint loaded within the above iframe AfterViewInit. --> 
<form target="frame" action="https://example.com/demoEndpoint" #form method="POST" (ngSubmit)="submitForm($event)"> 
    <input type="hidden" name="a_field" value={{a_field}} id="a_field" /> 
    <input type="hidden" name="b_field" value={{b_field}} id="b_field" /> 
    <input type="hidden" name="c_field" value={{c_field}} id="c_field" /> 
    <input type="hidden" name="show_form" value={{show_form}} /> 
</form> 
// end: home.component.html