时间戳

首页 > 解决方案 > 表单组件外的提交按钮

angular - 表单组件外的提交按钮

问题描述

我的提交按钮在表单和不同的组件之外。问题是我不知道如何使它工作。这是我的示例代码和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>

标签： angulartypescriptangular-forms

解决方案

我建议将按钮放入内部并提交，只需将包含所有详细信息的事件传递给父组件以进行提交按钮逻辑。这将确保表单被重复使用，并且所有验证和内容都在表单内。

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

推荐阅读