表单组件外部的提交按钮

Question

我的提交按钮位于表单和其他组件之外。问题是我不知道如何使它工作。这是我的示例代码和Stackblitz演示

Component One（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>

Answer 1

我建议将按钮放在内部并提交，只需将事件及其所有详细信息传递给父组件以提交按钮逻辑。这将确保重新使用该表单，并且所有验证和内容都在表单内部。

但是，如果您仍然需要遵循这种逻辑；这是更新的stackblitz演示：https://stackblitz.com/edit/best-example-of-passing-data-through-an-object-using-a-s-qnikat