mat-stepper has the behavior to add mat-form-field-invalid to mat-form-field if a user moves to the next step and the mat-form-field is untouched and pristine.so, when the user goes back to the same step, the field is highlighted with an error. There are a few ways to prevent this behavior and one is described here and related to resetting 'interacted' property of a step - Prevent a new formControl to be invalid after a mat-stepper is complete.
However, it applies the same behavior even if mat-form-field is declared inside of ng-template (i.e. mat-step>ng-template>mat-form-field). This really messes things up when a template is declared inside of mat-step but is used outside of the mat-stepper.
To give context, I want to create a list component that would show items in a mat-step and allow to edit those items in a separate mat-step using a template defined in ng-template in an initial mat-step.
I guess my main question is how to prevent mat-stepper from updating anything defined in ng-template in mat-step but I'd be curious to know why exactly this behavior exists. It seems the devs went an extra mile because updating the template is not the same as simply updating mat-form-field.
One of the things I tried to do is to clone TemplateRef of the template when the component is shown but I couldn't find any way to clone it. I guess Ref in TemplateRef is there for a reason. Also, the interacted didn't work for me either.