Нг-контент в теге формы

Question

У меня есть компонент формы с <ng-content> тег внутри и btn, который в настоящее время ничего не делает. Также у меня есть родительский компонент, который использует его с простым вводом как проекция контента.

Проблема в том, что всякий раз, когда я нажимаю на кнопку, родительский компонент и компонент формы перезагружаются, и страница обновляется с исходным состоянием.

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>

Я чувствую, что скучаю по чему-то простому с контент-проекцией

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

Answer 1

Просто для предложения, проблема в том, что вы объявили тип кнопки как отправить

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

Итак, если вы объявили тип кнопки как submit, она отправит форму, подобную этой. Я также столкнулся с такой проблемой. Так что просто замени,

HTML-файл

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

TS файл

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

Я надеюсь, это решит вашу проблему. Давайте попробуем это один раз и дайте мне знать.

Спасибо,

Музукумар