Angular 5/6: ERROR Ошибка: поле mat-form должно содержать MatFormFieldControl

Я пытаюсь открыть окно OpenDialog из списка таблиц и получаю следующую ошибку: ОШИБКА Ошибка: поле mat-form должно содержать MatFormFieldControl.

вот код HTML openDialog:

<h2 mat-dialog-title>Edit Order</h2>

<mat-dialog-content >

    <mat-form-field>
        <mat-card-content *ngIf = "order.orderDate != null" [(ngModel)] = "order.orderDate" name = "orderDate" ngDefaultControl ></mat-card-content>
    </mat-form-field>
    <mat-form-field>
        <mat-card-content [(ngModel)] = "order.destAddress" name = "destAddress" ngDefaultControl></mat-card-content>
    </mat-form-field>
    <mat-form-field>
        <mat-card-content [(ngModel)] = "order.deliveryType" name = "deliveryType" ngDefaultControl></mat-card-content>
    </mat-form-field>
    <mat-form-field>
        <mat-card-content [(ngModel)] = "order.price" name = "price" ngDefaultControl ></mat-card-content>
    </mat-form-field>
    <mat-form-field>
        <mat-card-content [(ngModel)] = "order.status" name = "status" ngDefaultControl></mat-card-content>
    </mat-form-field>

</mat-dialog-content>

<mat-dialog-actions>
    <button class = "mat-raised-button"(click) = "close()">Close</button>
</mat-dialog-actions>

вот код компонента диалога

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { Order } from '../Order';
import { OrdersService} from '../orders.service';

export interface DialogData {
  orderId: number;
  customerId: number;
  motoboyId: number;
  orderDate: Date;
  localAddress: string;
  latitudeOriginAddress: number;
  longitudeOriginAddress: number;
  destAddress:string;
  latitudeDestAddress:number;
  longitudeDestAddress: number;
  price: number;
  collectDate: Date;
  deliveryDate: Date;
  contactDestination: string;
  phoneDestination:string;
  phoneNumber: string;
  deliveryType: string;
  status: string;
  active: boolean;
}

@Component({
  selector: 'app-order-screen',
  templateUrl: './order-screen.component.html',
  styleUrls: ['./order-screen.component.css']
})
export class OrderScreenComponent implements OnInit {

  showButton : boolean = true;
  order = new Order();
  constructor(private orderService: OrdersService, public dialogRef: MatDialogRef<OrderScreenComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {
    console.info(data);
    this.order = data;
  }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }

}

вот код HTML, из которого должен быть открыт OpenDialog:

<div>
  <mat-form-field>
      <input matInput (keyup) = "applyFilter($event.target.value)" placeholder = "Filter">
    </mat-form-field>
    <button (click) = "refresh()">refresh</button>
<mat-table [dataSource] = "dataSource">
  <ng-container matColumnDef = "orderId">
    <mat-header-cell *matHeaderCellDef> Order Id </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.orderId}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "customerId">
    <mat-header-cell *matHeaderCellDef> Customer </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.customer.firstName}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "motoboyId">
    <mat-header-cell *matHeaderCellDef> Moto Boy </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.motoboy.firstName}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "localAddress">
    <mat-header-cell *matHeaderCellDef> Local Address </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.localAddress}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "destAddress">
    <mat-header-cell *matHeaderCellDef> Destenation Address </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.destAddress}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "price">
    <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.price}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "orderDate">
    <mat-header-cell *matHeaderCellDef> Order Date </mat-header-cell>
    <mat-cell *matCellDef = "let order"> {{order.orderDate}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "active">
    <mat-header-cell *matHeaderCellDef> isActive </mat-header-cell>
    <mat-cell  *matCellDef = "let order">
    <button *ngIf = "order.motoboy === null" (click) = "handleAsignToOrder(order)" >assign</button>

    </mat-cell>
  </ng-container>
  <ng-container matColumnDef = "actions">
    <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>>
    <mat-cell *matCellDef = "let order">  
      <button  matTooltip = "Edit Order" mat-raised-button (click) = "openDialog(order.orderId)" >Edit</button>
    </mat-cell>>
  </ng-container>
  <mat-header-row *matHeaderRowDef = "displayedColumns"></mat-header-row>
  <mat-row *matRowDef = "let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>

а вот код компонента принадлежит HTML.

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';
import { Order } from '../Order'
import { Observable } from 'rxjs';
import { OrdersService } from '../orders.service'
import { MatTableDataSource } from '@angular/material';
import { MotoBoy } from '../MotoBoy';
import { MotoService } from '../moto.service';
import { OrderScreenComponent } from '../order-screen/order-screen.component';


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {


  order: Order;
  currentMotoBoy: MotoBoy = new MotoBoy();
  orders: Array<Order> = new Array<Order>();
  dataSource =  new MatTableDataSource(this.orders);

  displayedColumns = ['orderId', 'customerId', 'motoboyId', 'localAddress', 'destAddress', 'price', 'orderDate', 'active', 'actions'];

  constructor(private ordersService: OrdersService, private motoService: MotoService, public dialog: MatDialog) {

  }

  ngOnInit() {
    // this.dataSource.data === this.order used this way to filter
    this.dataSource.data = this.ordersService.allOrders;
    this.ordersService.getAllOrders();
    this.ordersService.allOrdersObservable.subscribe((data) => {
      this.dataSource.data = data;
      console.info(this.dataSource.data)
    })
    this.motoService.singleMotoObservable.subscribe((data) => {
      this.currentMotoBoy = data;
      console.info(this.currentMotoBoy)
    })
  }




  openDialog(order_id) {
    let order = this.ordersService.findOrder(order_id)
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    dialogConfig.data = order
    console.info(order);
    this.dialog.open(OrderScreenComponent, dialogConfig);
  }


}

Я буду наслаждаться, чтобы вы мне помогли. Спасибо