角度材料日期選擇器添加水平線

Question

當我從 Angular Material 網站復制 DatePicker 示例時，它會在底部添加一條額外的水平線，但我不知道為什么。

這是示例：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

這是一個屏幕截圖：

Answer 1

這個問題是因為您使用的是angular material以及materialize或materialize樣式的cdn。 你可以刪除這一行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

並且日期選擇器的行就可以了，然后，您可以使用其他網格系統進行行和列。 例如： https : //github.com/angular/flex-layout

Answer 2

我只是把這個留在這里，以防其他人犯和我一樣的錯誤。 就我而言，我不小心將日期選擇器代碼復制並粘貼到現有mat-form-field 。 由於所有的標記，我一開始沒有注意到它。

我是這樣的，去掉外面的mat-form-field為我修復了它：

        <mat-form-field>
          <mat-form-field>
            <mat-label>End Date</mat-label>
            <input matInput [(ngModel)]="endDate" #endDate="ngModel" [matDatepicker]="picker1">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </mat-form-field>