Search code examples
angulartypescriptangular-forms

Submit button outside of form component

my Submit button is outside of the form and different component. The problem is I have no idea how to make it working. This my example code and Stackblitz demo

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>

Component Two(HTML)

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

  • I would recommend putting the button inside and on submit, just pass the event with all the details to the parent component for submit button logic. This will ensure that the form is re-used and all validations and stuff are inside form.

    However, if you still need to go with that logic; here is the updated stackblitz demo:https://stackblitz.com/edit/best-example-of-passing-data-through-an-object-using-a-s-qnikat