2

I have a form component with <ng-content> tag inside and btn that currently does nothing. Also I have a parent component that use it with simple input as content projection.

The problem is, whenever I click on the button, both parent and form-component are reloads, and the page refresh with the initial state.

formComponent.html:

<form class="form-control">
   <div class="form-group">
     <ng-content></ng-content>
      <button type="submit">Search</button>
   </div>
</form>

parentComponent.html:

<app-form-component>
   <input type="text" [(ngModel)]="car.id">
</app-form-component>

I feel like I'm miss something basic with content-projection.

sackblitz: https://stackblitz.com/edit/angular-zqjxjs

daniel gi
  • 396
  • 1
  • 7
  • 19

1 Answers1

0

Just for suggestion, The problem is you have declared button type as submit

 <button type="submit">Search</button>

So, If you declared button type as submit it will submit the form like this. I have also faced this type of problem. So just replace,

html file

  <button type="button" (click)="doLogic()">Search</button>

ts file

doLogic(){
   //do your logics here.
}

I hope its solve your problem. Lets try this once and let me know.

Thanks,

Muthukumar

Karnan Muthukumar
  • 1,843
  • 1
  • 8
  • 15