Angular Material sidenav drawer locked when mat-form-field is used in the page

Question

I have a small test application created from a tutorial found on the web, in which I define a SideNav drawer with 3 links, a toobar with a title and a router-outlet with 3 pages (components).

Here is the "main-nav.component.html":

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar><button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()"
      *ngIf="isHandset$ | async">
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item (click)="drawer.toggle()" routerLink="/first-page">First Page</a>
      <a mat-list-item (click)="drawer.toggle()" routerLink="/second-page">Second Page</a>
      <a mat-list-item (click)="drawer.toggle()" routerLink="/third-page">Third Page</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Title</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

It works nicely with simple pages. But in one page, I tried the following :

<mat-form-field class="search-form">
    <input matInput placeholder="Search Picture" type="text">
</mat-form-field>
<button button="submit" mat-raised-button color="primary">Search</button>
<br>

<div fxLayout="row wrap" fxLayoutGap="16px grid" fxLayoutAlign="space-evenly">
    <div fxFlex="0 1 calc(33.3% - 16px)" *ngFor="let picture of pictures" >
    <mat-card class="card-picture">
        <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
            <span fxFlex="80%" style="font-weight: normal; font-size: medium;">{{picture.title}} </span>
            <mat-icon fxFlex="10%">mode_edit</mat-icon>
            <mat-icon fxFlex="10%">delete</mat-icon>
        </mat-card-title>
        <img mat-card-image [src]="picture.img">
    </mat-card>
    </div>
</div>

When I click the link for this "second page", the page displays, but the drawer gets stuck. It doesn't toggle anymore. I can click where I want, including on the "menu" icon, nothing happens. If I click a link to another page, it starts working again.

I tried commenting things out, and it appears the "mat-form-field" is causing the issue. If I comment it out, then it works properly.

Anyone can point me out on what is causing this behavior and how to use the "mat-form-field" and a drawer in the same application ?

Sierramike Sierramike · Accepted Answer · 2019-12-11T09:22:54

Thanks to robbieAreBest question, that pointed me to the right place. Console was reporting errors:

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

I found out that I was missing an import in app.module.ts:

import { MatInputModule } from '@angular/material';

@NgModule({
  imports: [
   ------
    MatInputModule
  ],
  ------
})
export class AppModule { }

Angular Material sidenav drawer locked when mat-form-field is used in the page

1 Answers