Question

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

所以，我试图从组件中提取标签，现在我已经

了

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

如果我将表单保留在组件内，我将：

我的组件

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

首次使用我的组件

<app-my-component-with-inputs></app-my-component-with-inputs>

第一次使用时一切都很好。

但是对于第二种用法，组件已经在一个更大的形式内，所以对于里面的表单，我将有：

<form name="form2">
  <input3>
  <input4>
  <input5>
  <!-- if I put <form> tag inside the component, I will have 2 <form> in my second usage -->
  <app-my-component-with-inputs></app-my-component-with-inputs> 
</form>

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

我该如何触发onSubmit（）方法？

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

Answer 1

考虑到您需要在多个页面上显示相同的表单，您可以在组件内部使用表单标记，现在触发onSumit函数使用@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>

component1.html

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

component1.ts

onSubmit(data) {
    // use form data
}

component2.html

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

component2.ts

onSubmit2(data) {
    // use form data
}

Answer 2

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

https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73

所以你可以使用如下：

component1.html

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

component1.ts

onSubmit() {
    // use form model
}

component2.html

<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>

component2.ts

onSubmit2(data) {


}

是否可以将<form>标记与组件分开

2 个答案: