ngx-mat-timepicker automatically sets form as dirty and updates form value

[MatthewLHolden]

Firstly, thanks for the library :)

When displaying the date time picker in my HTML, it automatically changes the state of my form to dirty. I have two scenarios:

1. The form is populated by a firestore query with a time value that has already been saved. When the form component is open, the form displays the correct time from my database, but does however automatically set my form to dirty, despite the value already existing and being unchanged. I would like this not to happen as I'm not manually changing the time. Only if I change the time would I expect this to happen.

2. I have a new form and want to fill out the values. Before touching the time picker, it has already set the form to dirty with the time the form component was activated / opened. Not entirely sure of a good UX around this particular scenario. If the user didn't want to save the pre-populated time at that given moment, they shouldn't have to. However the form is marked as dirty and that activates my 'save' button.

TS

    this.testForm = this.fb.group({
      id: [{ value: null, disabled: true }],
      title: ['', Validators.required],
      time: null,
    });

HTML

<form [formGroup]="testForm">
  <ngx-mat-timepicker formControlName="time"></ngx-mat-timepicker>
</form>

[Vbuddies]

I have the same issue. On page load before the user can interact with anything, I am setting the initial value, in the same way as @MatthewLHolden. The component then sets the control I have given it to dirty, which causes the parent form of the control to now also be marked as dirty. This causes issues with other parts of my code thinking the user has edited values and asking for them to save before leaving, when they haven't changed any values.

[MatthewLHolden]

@Vbuddies - If it helps, the implementation I settled on was to display a button with a clock icon. When clicking that I toggle the time picker into view using *ngIf on the HTML element. Only then is the form state modified. That's the best approach I could come up with.