Как я могу динамически создать форму и отправить ее в Angular 7?

Мне нужно сначала вызвать 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()


angular angular-forms
person Jepzen    schedule 12.03.2019    source источник
comment
Вы хотите отправить форму обратно на сервер?   -  person Josef Katič    schedule 12.03.2019
comment
Я хочу отправить на другой сервер   -  person Jepzen    schedule 12.03.2019

Ответы (2)


arrow_upward
2
arrow_downward

Ошибка, которую вы здесь делаете, заключается в том, что вы не можете получить доступ к данным в 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(), но тогда это приведет к этой ошибке

Отправка отменена, так как форма не подключена.

person Josef Katič    schedule 12.03.2019
comment
this.http.post()... Он не перенаправляет браузер, не так ли? - person Jepzen; 12.03.2019
comment
@Jepzen Нет, это не так - person Josef Katič; 12.03.2019
comment
Но он также возвращает такие данные, как .get() - person Josef Katič; 12.03.2019
comment
Мне нужно перенаправить браузер. - person Jepzen; 13.03.2019
comment
На другую веб-страницу? Не маршрут в маршрутизаторе Angular, верно? - person Josef Katič; 13.03.2019
comment
Другая веб-страница да - person Jepzen; 13.03.2019
comment
Я надеюсь, что у объекта FormGroup был метод отправки, который я мог бы вызвать - person Jepzen; 13.03.2019
comment
@Jepzen Я обновил ответ. Вероятно, есть какое-то лучшее решение, но это сработало. - person Josef Katič; 14.03.2019

arrow_upward
0
arrow_downward

Если в вашей форме нет условий (например, обязательных полей или полей с ограниченным доступом), вы можете использовать конструктор форм таким образом.

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

Tha должен построить форму из прямого объекта JSON. Проблема в том, что вы должны заранее знать свою модель формы, чтобы избежать ошибок. А реактивные формы для этого не предназначены.

Вместо этого вы должны полагаться на формы, основанные на шаблонах. официальная документация может рассказать вам больше.

Вы можете использовать Object.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>

Или что-то подобное.

person Community    schedule 12.03.2019