Angular Material mat-form-field modifies styling of toolbar-CodePudding

Trying to create an input field in my component where I have mat-toolbar element, unfortunately inserting a mat-form-field element changes the styling of the mat-toolbar.

I was not able to diagnose where the issue is coming from (maybe if you happen to find out it will be a good idea to explain how you did), nor how to overcome it.

Here is a stackblitz minified example. To make the bug appear - uncomment line 11 in /test-comp.component.html. Link to StackBlitz.

Note: I know a simple border can be used instead of border-box class but in the full-blown app it serves a different purpose that I can not replicate with a border.

CodePudding user response：

You are using mat-form-field without any form field control, and hence the issue. You can try adding any form field control and it will work. As an example, we can add <input> element along with matInput directive as:

<mat-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

We also would have to import appropriate module in app.module.ts:

import { MatInputModule } from '@angular/material/input';
...
 imports: [
  ...
  MatInputModule
 ]

I was not able to diagnose where the issue is coming from (maybe if you happen to find out it will be a good idea to explain how you did), nor how to overcome it.

I went to Stackblitz, uncommented the line and was surprised with the output. Since I haven't used Angular Material Components, I tried to investigate styles within Devtool Elements tab. I didn't saw anything wrong with the styles. I opened the console and there it was:

Error: mat-form-field must contain a MatFormFieldControl.

That gave me the clue that mat-form-field should have some kind of form control within it. I went to the docs, and found this:

This error occurs when you have not added a form field control to your form field. If your form field contains a native or <textarea> element, make sure you've added the matInput directive to it and have imported MatInputModule. Other components that can act as a form field control include <mat-select>, <mat-chip-list>, and any custom form field controls you've created.

PS: I was also able to see below warning in console. So you may need to add theme too.

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming