表单组件外的提交按钮

Question

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

组件一(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

表单组件外的提交按钮

Submit button outside of form component

typescript

angular

angular-forms