Search code examples
angular-materialangular5materialize

Angular Material - input field - duplicate fields are displayed

I am setting up an Angular project to use the Angular Material framework. I am also using materializecss. When I try to create a form, I get a double control shown below...

Double outline

Here is how I am creating this field:

<mat-form-field hintLabel="Max 10 characters" appearance="standard">
  <input matInput #input (keyup)="applyFilter($event.target.value)" placeholder="Filter catalogs">
</mat-form-field>
Solution

  • Use either Angular Material MatInput and MatFormField or MaterializeCSS, but not both. They both add their own style to input, causing the problem you see.