嘗試在我有mat-toolbar元素的組件中創建一個輸入欄位，不幸的是插入一個mat-form-field元素會改變mat-toolbar.
我無法診斷問題出在哪里（也許如果你碰巧發現解釋你是怎么做的將是一個好主意），也無法解決它。
這是一個 stackblitz 縮小的例子。要使錯誤出現 - 取消注釋第 11 行/test-comp.component.html。鏈接到 StackBlitz。
注意：我知道可以使用簡單的邊框代替border-box類，但在成熟的應用程式中，它有不同的用途，我無法用邊框復制。
uj5u.com熱心網友回復：
您正在使用mat-form-field沒有任何表單欄位控制元件，因此存在問題。您可以嘗試添加任何表單欄位控制元件，它會起作用。例如，我們可以將<input>元素與matInput指令一起添加為：
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
我們還必須在 app.module.ts 中匯入適當的模塊：
import { MatInputModule } from '@angular/material/input';
...
imports: [
...
MatInputModule
]
我無法診斷問題出在哪里（也許如果你碰巧發現解釋你是怎么做的將是一個好主意），也無法解決它。
我去了 Stackblitz，取消了該行的注釋，并對輸出感到驚訝。由于我沒有使用過 Angular Material Components，因此我嘗試在 Devtool Elements 選項卡中研究樣式。我沒有看到風格有什么問題。我打開控制臺，它是：
Error: mat-form-field must contain a MatFormFieldControl.
這給了我一個線索，即 mat-form-field 應該在其中包含某種形式的控制元件。我去了檔案，發現了這個：
當您尚未將表單域控制元件添加到表單域時，會發生此錯誤。如果您的表單域包含原生或 <textarea> 元素，請確保您已向其中添加 matInput 指令并已匯入 MatInputModule。其他可以充當表單域控制元件的組件包括 <mat-select>、<mat-chip-list> 以及您創建的任何自定義表單域控制元件。
PS：我還能夠在控制臺中看到以下警告。所以你可能還需要添加主題。
找不到 Angular Material 核心主題。大多數 Material 組件可能無法按預期作業。有關更多資訊，請參閱主題指南：https : //material.angular.io/guide/theming
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406667.html
標籤：