Question

通过遵循角材料网站上的示例尝试添加对话框功能。出现错误“无法绑定到'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 {
}

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>

Answer 1

在您的app.module.ts

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

并添加

FormsModule,
ReactiveFormsModule,

要导入[]。

另外，您正在PopupComponent.html中绑定[formGroup]="form"，但是我在PopupComponent ts片段中看不到类型formGroup的形式。

角度材料对话框错误“无法绑定到“ formGroup”，因为它不是“ mat-dialog-content”的已知属性。”

1 个答案: