表单标签中的ng-content

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>

因此，如果您将按钮类型声明为“提交”，它将提交这样的表单。 我也遇到过这类问题。所以只需替换

html文件

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

ts文件

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

希望它能解决您的问题。让我们尝试一次，让我知道。

谢谢

Muthukumar