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

Question

I need to first call a API get some values put in my form then submit it. I like to avoid having a form with hidden inputs and want to create it on the fly. My pseudo code

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
}

I want my browser to redirect to the page I am submitting the form to.

EDIT: Sorry..! My concerns was mostly how to submit this form. Not to get the data and populate the form. My code was just a template.. It is the this.signForm.submit() method I am missing

Answer 1

The mistake you are doing here is that you can't access data in mydata without subscribing to it because http.get() returns Observable

You can use subscribe

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);
 });
}

Or async/await

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);
}

Update:

I have tried several things to send post request with redirect in Angular. But the only one which worked for me was creating hidden <form>

For this I have created this method

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();
  }

The best way here would be to submit it without the appendChild() but then it would produce this error

Submit was canceled because form is no connected.

Answer 2

If you don't have conditions on your form (like required fields, or restricted fields), you can use the form builder like so.

constructor(
  fb: FormBuilder,
  http: HttpClient
) {
  http.get(...).subscribe(response => fb.group(response));
}

Tha should build the form from a direct JSON object. The issue is that you have to know your form model in advance to avoid getting errors. And reactive forms aren't made for that.

Instead, you should rely on template driven forms. The official documentation can tell you more.

You can use Object.keys to iterate over the keys.

rawResponse$ = this.http.get(...).pipe(share());
keys$ = this.rawResponse$.pipe(response => Object.keys(response));

<ng-container *ngFor="let key of keys$ | async">
  <input type="text" [(ngModel)]="(rawResponse$ | async)?[key]">
</ng-container>

Or something similar.