Angular 是否可以分开<；表格>；来自组件的标记

我有一个表单组件，我在两个不同的地方使用。唯一的区别是它们属于不同的形式

所以，我试着从组件中提取标签，现在我有了

<form (ngSubmit)="onSubmit()">
    <app-my-component-with-inputs></app-my-component-with-inputs>
</form>

如果我将表单保留在组件中，我将拥有：

我的组件

<form "name"="mycomponent">
  <input1>
  <input2
  <input3...>
</form>

但是，当我单击组件内部的submit按钮时，它不会触发onSubmit方法（我理解，因为它不再是组件的一部分）

如何触发onSubmit（）方法

---

这样做可以吗，还是有更好的方法？

考虑到您需要在多个页面上显示相同的表单，您可以在组件内部使用表单标记，现在触发onSumit函数use@output，如下所示：

主要组件1 ts文件添加

@Output('onSave') onSave = new EventEmitter();
onSubmit() {
    this.onSave.emit(this.model);   // model hold your form model data
}

主组件1 html文件

<form (ngSubmit)="onSubmit()">
...
</form>

component2.html

<app-my-component-with-inputs (onSave)="onSubmit2($event)"></app-my-component-with-inputs>

<form (ngSubmit)="onSubmit2()">
    <input [(ngModel)]="model.data1" name="data1">
    <input [(ngModel)]="model.data2" name="data2">
    <input [(ngModel)]="model.data3" name="data3">
    <app-my-component-with-inputs [(ngModel)]="model.submodel"></app-my-component-with-inputs>
    <button type="submit"></button>
</form> 

---

对于常见控件，我认为您应该创建一个实现ControlValueAccessor的自定义组件，如下所示：

因此，您可以按如下方式使用：

component1.html

<app-my-component-with-inputs (onSave)="onSubmit($event)"></app-my-component-with-inputs>

<form (ngSubmit)="onSubmit()">
    <app-my-component-with-inputs [(ngModel)]="model"></app-my-component-with-inputs>
    <button type="submit"></button>
</form>

component2.html

<app-my-component-with-inputs (onSave)="onSubmit2($event)"></app-my-component-with-inputs>

<form (ngSubmit)="onSubmit2()">
    <input [(ngModel)]="model.data1" name="data1">
    <input [(ngModel)]="model.data2" name="data2">
    <input [(ngModel)]="model.data3" name="data3">
    <app-my-component-with-inputs [(ngModel)]="model.submodel"></app-my-component-with-inputs>
    <button type="submit"></button>
</form> 

---

也许我不够清楚，我更新了问题。我提取标签是为了避免在同一个表单中有两个标签。在form2中，您是否需要检查任何验证，我的意思是，这些字段中的任何一个都是必填的或有效的电子邮件等。是的，我有3个必填字段，1个名称和2个日期！我看起来很复杂，但它相对来说是无痛的！

<form (ngSubmit)="onSubmit()">
    <app-my-component-with-inputs [(ngModel)]="model"></app-my-component-with-inputs>
    <button type="submit"></button>
</form>

onSubmit() {
    // use form model
}

<form (ngSubmit)="onSubmit2()">
    <input [(ngModel)]="model.data1" name="data1">
    <input [(ngModel)]="model.data2" name="data2">
    <input [(ngModel)]="model.data3" name="data3">
    <app-my-component-with-inputs [(ngModel)]="model.submodel"></app-my-component-with-inputs>
    <button type="submit"></button>
</form> 

onSubmit2(data) {


}