在 angular x (2 4 5) 中动态创建表单并提交它的最佳方法是什么？答案

【问题标题】：What would be the best way to create a form onthe Fly in angular x (2 4 5) and submit it?在 angular x (2 4 5) 中动态创建表单并提交它的最佳方法是什么？
【发布时间】：2018-08-24 18:11:15
【问题描述】：

我有一个 angular x(2 4 5) 应用程序，我必须将帖子重定向到银行页面，以便用户可以支付一些费用。所以，我想在我的 DOM 中动态创建一个表单并发布它。找不到最好的方法。循环和创建表单很容易，但绘制后直接发布并不容易。

提前致谢

【问题讨论】：

由于 Angular 是一个客户端框架，我认为你不能“发布”到它。 ...刚刚检查了其他一些 Angular GDE，他们说了同样的话。

标签： angular typescript angular5 angular-forms

【解决方案1】：

正如@DeborahK 提到的，您可能无法直接发布 Angular 表单。

但是，您没有理由无法从表单中获取数据，并将其传递给使用 HttpClient 库执行 HTTP POST 且内容类型为 multipart/form-data 的服务。

类似这样的：

  const headers = new HttpHeaders({'Content-Type': 'multipart/form-data'});
  const formData = new FormData();

  formData.append("name","username"); 
  // repeat formData.append for additional form fields      

  this.httpClient.post<any>(URL, formData, {headers: headers});

【讨论】：

我感到好奇（和无知），为什么你使用 FormData 而不仅仅是一个简单的对象？使用 FormData 有什么好处？
FormData 是 HttpClient 用来创建多部分请求的构造。

【解决方案2】：

您可以使用隐藏字段的表单和 ViewChild 来获取表单的引用，例如

@Component({
  selector: 'my-app',
  template: `
    <button (click)="sendData()">send</button>
    <form #externalForm method="post" action="http://url-comerce" target="_blank">
      <input type="hidden"  id="data1" name="data1" [ngModel]="comerceData.data1">
      <input type="hidden" id="data2" name="data2" [ngModel]="comerceData.data2" >
    </form>
  `,
})
export class HomeComponent {

  comerceData:any={}

  @ViewChild('externalForm') externalForm: ElementRef;

  constructor() { }

  sendData() {
      //fill the data to send
      this.comerceData={
         data1:"something",
         data2:"something more"
      }
      //Use a setTimeout. if not, the change of the data are not send
      setTimeout(()=>{
        this.externalForm.nativeElement.submit()
      }, 0);
  }
}

【讨论】：