Angular Material Dialog error 'Can't bind to 'formGroup' since it isn't a known property of 'mat-dialog-content'.'

Question

Trying to add dialog functionality by following the example on angular material website. Get an error "Can't bind to 'formGroup' since it isn't a known property of 'mat-dialog-content'." Angular Material documentation is missing information about NgModule files.

What am I missing?

module:

import { MatExpansionModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA, 
        MatDialogModule } from 'node_modules/@angular/material';
import { PopupComponent } from './popup.component';
... 
@NgModule({
  imports: [
        ..
        MatDialogModule,
        ..
        ],
  declarations: [
            AppComponent,
            PopupComponent
          ],
  exports: [
         ...
        ],
  providers: [
      { provide: MAT_DIALOG_DATA, useValue: 'dialogData'}
  ],
  entryComponents: [ PopupComponent ]
  })

  export class AppModule {
}

AppComponent:

....
name: any;
animal: any;

constructor(public dialog: MatDialog) {}

openDialog(): void {
 const dialogRef = this.dialog.open(PopupComponent, {
  data: {name: this.name, animal: this.animal}
});

dialogRef.afterClosed().subscribe(result => {
  console.log(result);
});

}

AppComponent.html

<button mat-raised-button (click)="openDialog()">Pick one</button>

PopupComponent

....
export class PopupComponent implements OnInit {

 constructor(
  public dialogRef: MatDialogRef<PopupComponent>,
  @Inject(MAT_DIALOG_DATA) public data) { }

 ngOnInit() {}

 onNoClick(): void {
  this.dialogRef.close();
 }
}

PopupComponent.html

 <mat-dialog-content [formGroup]="form"> 
   <mat-form-field>
     <input matInput
            placeholder="Course Description"
           formControlName="description">
     </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
  <button class="mat-raised-button"(click)="close()">Close</button>
  <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

Avinash Avinash · Accepted Answer · 2018-08-13T20:48:19

In your app.module.ts

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

and add

FormsModule,
ReactiveFormsModule,

to imports[ ].

Also you are binding [formGroup]="form" in your PopupComponent.html, but i don't see form of type formGroup defined in your PopupComponent ts snippet.

Angular Material Dialog error 'Can't bind to 'formGroup' since it isn't a known property of 'mat-dialog-content'.'

1 Answers