-1

I have a reactive form which contains all the data needed for the page/component. However, I want to also store some information which is not part of the main data set but still needs to be stored as part of the component. For example, I need to know if Widget X is in inventory. If so, I can choose to take it from inventory, or I can make a new one. I need to store whether it is taken from inventory or not, but that information should not be stored as part of the main data set.

I know that I can put whatever I want into the form and then remove it before sending the data back to the server. The problem with that is that I want to have a Save button that is only enabled when the form is dirty. If someone changes whether they are taking the widget from inventory or not, it makes the form dirty. So I either need a separate form (but it needs to be able to be shown interspersed with the main form), or have a way to make certain controls not change the 'dirty' property on the form. Are either of those possible?

Hopefully this question makes sense. I did not want to post a whole bunch of code that wasn't totally relevant. I am using Angular 6.

Tim
  • 1,605
  • 6
  • 31
  • 47

1 Answers1

0

I did not understand how multiple forms could be viewed on the same page. In other words, I thought you had to do something like where you were limited to one form:

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

However, you can use as many forms as you want (and even switch back and forth) like:

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

You can even do this for array controls. (see this question for the loop)

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

where reqSupplemental is a FormArray that I set up when the component is initialized (it contains data needed by the component but which does not need to be saved). partsList returns a FormGroup which is part of the data that does need to be saved (but in the part shown here it is only referenced and cannot be modified).

So the data from the reqSupplemental is not tied to the main data form and therefore changes to its controls do not make the main form "dirty".

Tim
  • 1,605
  • 6
  • 31
  • 47