Angular Material Dialog 错误“无法绑定到“formGroup”，因为它不是“mat-dialog-content”的已知属性。答案

【问题标题】：Angular Material Dialog error 'Can't bind to 'formGroup' since it isn't a known property of 'mat-dialog-content'.'Angular Material Dialog 错误“无法绑定到“formGroup”，因为它不是“mat-dialog-content”的已知属性。
【发布时间】：2018-08-13 20:37:24
【问题描述】：

按照角度材料网站上的示例尝试添加对话框功能。收到错误“无法绑定到 'formGroup'，因为它不是 'mat-dialog-content' 的已知属性。” Angular Material 文档缺少有关 NgModule 文件的信息。

我错过了什么？

模块：

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 {
}

应用组件：

....
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>

弹出组件

....
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>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在您的 app.module.ts 中

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

并添加

FormsModule,
ReactiveFormsModule,

导入[]。

您还在 PopupComponent.html 中绑定 [formGroup]="form"，但我没有看到您的 PopupComponent ts sn-p 中定义的 formGroup 类型的形式。

【讨论】：