如何修复Angular 17+中Mat-date-picker日历定位异常问题

我在使用Angular 17+开发时遇到Mat-date-picker的问题：点击日历图标后，日历组件会显示在页面左上角，且呈现透明状态，无法正常定位到日期输入框附近。尝试多种方法均未解决，现提供相关代码：

signup.html代码 #

<div class="signup-page">

</div>
<form [formGroup]="signupForm" (ngSubmit)="SignUpUser()">
  <div class="container">
    <h2>Sign Up</h2>
    <div class="names">
      <div class="form-label-name">
        <label for="firstName" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstName" placeholder="Enter First Name" formControlName="first_name" autocomplete="off">
        <div class="error" *ngIf="signupForm.controls['first_name']?.invalid && signupForm.controls['first_name']?.touched">Please Enter First Name</div>
      </div>
      <div class="form-label-name">
        <label for="lastName" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" formControlName="last_name" autocomplete="off">
        <div class="error" *ngIf="signupForm.controls['last_name']?.invalid && signupForm.controls['last_name']?.touched">Please Enter Last Name</div>
      </div>
    </div>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email" formControlName="email" autocomplete="off">
      <div class="error" *ngIf="signupForm.controls['email']?.invalid && signupForm.controls['email']?.touched">Please Enter Email</div>
    </div>
    <div class="mb-3">
      <label for="dob" class="form-label">Date of Birth</label>
      <div class="date-picker-container">
        <input matInput [matDatepicker]="picker" class="form-control" placeholder="MM/DD/YYYY" formControlName="date_of_birth">
        <mat-datepicker-toggle matSuffix [for]="picker" class="custom-calendar-toggle"></mat-datepicker-toggle>
        <mat-datepicker #picker [touchUi]="true"></mat-datepicker>
      </div>
      <div class="error" *ngIf="signupForm.controls['date_of_birth'].invalid && signupForm.controls['date_of_birth'].touched">Please Enter Date of Birth</div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password" formControlName="password" minlength="8" maxlength="256" autocomplete="off">
      <div class="error" *ngIf="signupForm.get('password')?.hasError('required') && signupForm.get('password')?.touched">Please Enter the Password</div>
      <div class="password-error" *ngIf="signupForm.get('password')?.errors && signupForm.get('password')?.dirty">
        <ul>
          <li *ngIf="signupForm.get('password')?.hasError('minlength')">Password must be at least 8 characters long</li>
          <li *ngIf="signupForm.get('password')?.hasError('pattern')">Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character</li>
        </ul>
      </div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Confirm Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Confirm Password" formControlName="confirm_password" minlength="8" maxlength="256" autocomplete="off">
      <div class="error" *ngIf="signupForm.controls['confirm_password']?.invalid && signupForm.controls['confirm_password']?.touched">Please Enter Confirm Password</div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Phone Number</label>
      <input type="text" pattern="[0-9]*" class="form-control" id="exampleInputPassword1" placeholder="Enter Phone Number" formControlName="contact_number" minlength="10" maxlength="20" autocomplete="off">
      <div class="error" *ngIf="signupForm.controls['contact_number']?.invalid && signupForm.controls['contact_number']?.touched">Please Enter Contact Number</div>
    </div>
    <div>
      <button [disabled]="signupForm.invalid" type="submit" class="btn btn-primary">Sign Up</button>
    </div>
  </div>
</form>

signup.css代码 #

h2 {
  text-align: center;
  padding-bottom: 20px;
  font-style: italic;
}

.container {
  width: 390px;
  background-color: whitesmoke;
  border: 2px solid #ffffff;
  border-radius: 5%;
  margin: auto; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.date-picker-container {
  position: relative;
}

.form-control {
  padding-right: 36px;
}

.custom-calendar-toggle {
  position: absolute;
  top: 50%;
  right: 0px; 
  transform: translateY(-50%);
}

.error { 
  color: red;
  font-size: 12px;
}

.password-error {
  color: red;
  font-size: 12px;
  margin-left: -10px;
}

.names {
  display: flex; 
  justify-content: space-between;
  padding-bottom: 15px;
}

.form-label-name:first-child input {
  margin-right: 10px;
}

.form-label-name:last-child {
  margin-left: 10px; 
}


.btn {
  width: 150px; 
  display: block; 
  margin: 0 auto; 
}
  .btn:hover {
      background-color: darkblue;
  }

  .btn:disabled {
    background-color: blue;
  }  

问题表现说明 #

点击日历图标后，日历组件出现在页面左上角，整体呈透明状态，无法正常显示在日期输入框的对应位置。

内容的提问来源于stack exchange，提问作者Ameya Chavan