Angular 6 是否可以在同一个页面上有不同功能的表单？

Question

我有一个响应式表单，其中包含 page/component 所需的所有数据。但是，我还想存储一些不属于主数据集但仍需要作为组件的一部分存储的信息。例如，我需要知道 Widget X 是否在库存中。如果是这样，我可以选择从库存中取出它，或者我可以制作一个新的。我需要存储它是否是从库存中取出的，但该信息不应作为主数据集的一部分存储。

我知道我可以将我想要的任何内容放入表单，然后在将数据发送回服务器之前将其删除。问题是我想要一个仅在表单变脏时才启用的保存按钮。如果有人改变他们是否从库存中取出小部件，它会使表单变脏。所以我要么需要一个单独的表单（但它需要能够与主表单穿插显示），要么有办法使某些控件不更改表单上的 'dirty' 属性。这些都可以吗？

希望这个问题是有道理的。我不想 post 一大堆不完全相关的代码。我正在使用 Angular 6.

Answer 1

我不明白如何在同一页面上查看多个表单。换句话说，我认为你必须做一些事情，比如你只能使用一种形式：

<form [formGroup]="formOne">
    ...
</form>

但是，您可以根据需要使用任意多种形式（甚至来回切换），例如：

<div [formGroup]="formOne">
    ...
</div>
<div [formGroup]="formTwo">
    ...
</div>
<div [formGroup]="formOne">
    ...
</div>

您甚至可以为数组控件执行此操作。（循环参见）

<div *ngFor="let item of ' '.repeat(partsList.value.length).split(''); let i = index">
    <div [formGroup]="reqSupplemental.at(i)" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
        <button mat-mini-fab disabled style="color: white">{{partsList.value[i].orderNumber}}</button>
        ...
    </div>
</div>

其中reqSupplemental是我在组件初始化时设置的一个FormArray（里面包含组件需要但不需要保存的数据）。 partsList returns a FormGroup 是需要保存的部分数据（但这里显示的部分只是引用，不能修改）。

所以来自 reqSupplemental 的数据没有绑定到主数据表单，因此对其控件的更改不会使主表单成为 "dirty"。

Angular 6 是否可以在同一个页面上有不同功能的表单？

Is it possible to have forms with different functions on the same page in Angular 6?

angular

angular-reactive-forms