Отправка динамической формы перезагружает страницу вместо вызова функции ngSubmit

Я пытаюсь отправить форму динамически из файла ts.

Форма

<form [formGroup]="mainForm" #mainFormEle (Submit)="doNothing()">
.....
</form>

и тс

  @ViewChild('mainFormEle',{static:false}) mainFormEle

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.mainFormEle.nativeElement.submit()
    ..
  }

Но приведенный выше блок перезагружает страницу при отправке. И никогда не переходит в doNothing(). Также пробовал с (ngSubmit) и (onSubmit)


javascript angular8 angular-forms angular-formbuilder
person OutForCode    schedule 16.12.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Скорее всего, у вас есть button в этой форме. Чтобы он не запускал собственное действие отправки формы. Вы должны явно добавить `type="button" на кнопку.

e.g.

<button type="button">
  <!-- rest of the button -->
</button>
person C_Ogoo    schedule 16.12.2019
comment
Все еще перезагружает страницу при отправке. Но это работает, когда кнопка отправки вводится в форму и вызывает событие нажатия на кнопку, чтобы отправить форму. - person OutForCode; 17.12.2019

arrow_upward
0
arrow_downward

Я нашел решение.

  1. Введена кнопка отправки.
  2. Вместо того, чтобы отправлять форму из ts, Just вызвал событие click на кнопке.
<button type="submit" #submitButton></button>

or 

<button type="submit" hidden #submitButton></button>

@ViewChild('submitButton',{static:false}) submitButton

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.submitButton.nativeElement.click()
    ..
  }

И теперь это работает.

person OutForCode    schedule 17.12.2019