Question

我需要先调用API，然后将一些值放入我的表单中，然后提交。我想避免使用带有隐藏输入的表单，而是想即时创建它。我的伪代码

submitMyform() {
  //first i call an API and get some data
  var mydata = this.http.get()...

 this.signForm = new FormGroup({
  'Name': new FormControl(mydata.name),
  'Age': new FormControl(mydata.age)   
 });

  this.signForm.submit() //Wished this method existed
}

我希望我的浏览器重定向到我向其提交表单的页面。

编辑：对不起..！我主要担心的是如何提交此表格。不获取数据并填充表格。我的代码只是一个模板。这是我缺少的this.signForm.submit（）方法

Answer 1

您在这里犯的错误是您无法订阅mydata中的数据，因为http.get()返回了Observable

您可以使用订阅

submitMyform() {
  //first i call an API and get some data
  var mydata = this.http.get()...
 mydata.subscribe((data) =>{
   this.signForm = new FormGroup({
    'Name': new FormControl(mydata.name),
    'Age': new FormControl(mydata.age)   
   });
   this.http.post('url', this.signForm);
 });
}

或异步/等待

async submitMyform() {
  //first i call an API and get some data
  var mydata = await this.http.get().toPromise();
  this.signForm = new FormGroup({
    'Name': new FormControl(mydata.name),
    'Age': new FormControl(mydata.age)   
  });
 this.http.post('url', this.signForm);
}

更新：

我已经尝试了几种方法来发送带有Angular重定向的帖子请求。但是唯一对我有用的方法是创建隐藏的<form>

为此，我创建了此方法

submitForm(action, method, formGroup: FormGroup) {
    const form = document.createElement('form');
    form.style.display = 'none';
    form.method = method;
    form.action = action;
    let input;
    for (const [key, value] of Object.entries(formGroup.value)) {
      input = document.createElement('input');
      input.name = key;
      input.id = key;
      input.value = value;
      form.appendChild(input);
    }
    document.body.appendChild(form);
      form.submit();
  }

最好的方法是在没有appendChild()的情况下提交该文件，但是会产生此错误

由于表单未连接，提交被取消。

如何动态创建表单并在Angular 7中提交？

1 个答案:

更新：