Отправить в пользовательском компоненте угловой кнопки не отправить форму - PullRequest
Новая
       22

Отправить в пользовательском компоненте угловой кнопки не отправить форму

0 голосов
/ 02 января 2019

Я извлек кнопку отправки в отдельный компонент.Теперь форма не отправлена ​​/ функция submit больше не вызывается, так как ngSubmit не запускается. 

<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
   ...
   <app-submit-button></app-submit-button>
</form>

Проблема в том, что кнопка в моем пользовательском компоненте app-submit-button вызывает вызов функции нанажмите кнопку.Событие submit больше не распространяется на родительский компонент, поэтому его функция submit не выполняется.Тем не менее, когда я удаляю (click) = 'submit ()' из дочернего компонента, форма отправки работает. 

<ng-container [ngSwitch]='state'>
  <button *ngSwitchCase='buttonState.Idle' (click)='submit()'
    type='submit'>{{idleText}}</button>
  ...
</ng-container>

Я попробовал это сделать с и без type = 'submit' на app-submit-button ина самой кнопке.

Я получил ее, работая с 

<app-submit-button (click)='submit(form.value)'></app-submit-button>

и удаляя ngSubmit.Я хотел бы знать, если это правильный путь или это ведет себя иначе, чем при использовании ngSubmit.

1 Ответ

0 голосов
/ 02 января 2019

Я думаю, что вы не должны делать другой компонент только для кнопки.Проблема в том, что вы не можете передать событие от родителя к ребенку.обе функции отправки различны, поскольку они принадлежат разным классам (одна находится в родительском компоненте, а другая - в дочернем).Вы можете создать событие в компоненте app-submit-button и создать событие при нажатии кнопки.как это в вашем app-submit-button файле машинописи 

@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}

, затем обработайте событие в html-файле родительского компонента, как это 

<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>

Это вызоветсобытие в дочернем компоненте и родителе будет действовать на это событие.Но все же это плохая практика - создавать другой компонент только для кнопки отправки.Вы должны использовать кнопку непосредственно в форме, не используя ребенка.Надеюсь, это поможет.Удачного кодирования; -)

...