Кнопка отправки вне компонента формы - PullRequest
Новая
       8

Кнопка отправки вне компонента формы

0 голосов
/ 13 апреля 2020

Моя кнопка отправки находится за пределами формы и другого компонента. Проблема в том, что я понятия не имею, как заставить это работать. Это мой пример кода и Stackblitz demo

Первый компонент (HTML) 

<div class="formContainer">
  <div class="name">
    <input type="text"
           placeholder="Name"
           name="name"
           [(ngModel)]="firstName">
  </div>

  <div class="email">
    <input type="text"
           placeholder="Email"
           name="email"
           [(ngModel)]="email">
  </div>
  <div class="genderContainer">
    <div class="male" (click)="male()" [ngStyle]="{'backgroundColor': btnClickedMale ? '#0543a5': '#dddddd'}">M</div>
    <div class="female" (click)="female()" [ngStyle]="{'backgroundColor': btnClickedFemale ? '#0543a5': '#dddddd'}">F</div>
  </div>
</div>

Второй компонент (HTML ) 

<div class="btnContainer">
    <button (click)="submitBtn()">Submit</button>
  </div>

1 Ответ

4 голосов
/ 13 апреля 2020

Я бы порекомендовал поместить кнопку внутри и после отправки, просто передать событие со всеми деталями в родительский компонент для кнопки отправки logi c. Это обеспечит повторное использование формы, а все проверки и прочее находятся внутри формы.

Однако, если вам все еще нужно go с этой логикой; Вот обновленная демонстрация стекаблиц: https://stackblitz.com/edit/best-example-of-passing-data-through-an-object-using-a-s-qnikat

...