Prevent input change from causing form to dirty (Angular 5.2)

Question

Is there a simple way to prevent an input control from dirtying its parent form? I could do so by building a custom tag that doesn't have a controlValueAccessor, but I was wondering if there is an easier way.

In the middle of one of my forms I have an input that takes a number next to a button. The input is just to specify how many of a certain type of item I want to add to a set of things. The input where you specify how many is not relevant to whether the form should be considered dirty as there are no "changes" to the form until the add button is clicked at which point a bunch of items get added to the set and I propagate changes from there.

Answer 1

If you are using template-driven forms, you can use

[ngModelOptions]="{standalone: true}"

This is specifically defined for your scenario. From the documentation:

standalone: Defaults to false. If this is set to true, the ngModel will not register itself with its parent form, and will act as if it's not in the form. This can be handy if you have form meta-controls, a.k.a. form elements nested in the tag that control the display of the form, but don't contain form data.