Is it possible to put the current date and time inside a mat-form-field?

I have a mat-form-field where I want the current time to be displayed inside an input field. I was able to add it inside but I'm having problem with the styling. Here is the line of code:

<mat-label>Filing Time:</mat-label><br>
              <mat-form-field appearance="outline" class="width-1">
                <input
                  matInput
                  formControlName="filingTime"
                  readonly
                  required
                />
                {{ filingDate | date: 'HH:mm:ss' }}
              </mat-form-field>

You're not actually adding that "inside" your input, it's actually oustide, if what you are looking to achieve is auto filling the input, then you need to use value property on <input/> but this ofcourse would cause a problem as that you can not use the date pipe inside the value property, therefore, you will have to use ngModel which will change your approach since that you're using the Reactive Forms approach, but you would figure this out easily either by using the standalone = true for your ngModel (that's if you don't want this field to appear in your form), Or you can keep the name property instead of formControlName and that would do too (That's if you wan the field to appear in your form), the basic implementation would go something like this:

<mat-label>Filing Time:</mat-label><br>
<mat-form-field appearance="outline" class="width-1">
  <input matInput [ngModel]="filingDate | date: 'HH:MM:SS'" />
</mat-form-field>

I can update this answer to suit your case after looking to some more code in the rest of your template, and your component class.

Hope this helped.