Angular 2/4/5 Material Dialog problems with ngModel

Question

I feel this is a silly question, but I just can't figure out why it's not working...

I have a material 2 dialog, here's the dialog component

import { AfterViewInit, Component, Injectable } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatDialog, MatDialogRef } from '@angular/material';

import 'rxjs/add/operator/toPromise';

// services
import { DialogService } from '../../../services/dialog.service';

@Component({
  selector: 'app-dialog-asset-upload',
  templateUrl: './dialog-asset-upload.component.html',
})

@Injectable()
export class DialogAssetUploadComponent {

  constructor(private dialog: MatDialog, private dialogS: DialogService) { }

  // open dialog
  open(): Promise<any[]> {

    // open dialog
    let dialogRef = this.dialog.open(DialogAssetUploadComponentDialog, {});

    return dialogRef.afterClosed().toPromise().then(res => {

      console.log('in asset upload',res);
      return res;
    });
  }
}

@Component({
  selector: 'app-dialog-asset-upload-dialog',
  templateUrl: './dialog-asset-upload.component.html',
})
export class DialogAssetUploadComponentDialog {

  fieldValues = {};

  constructor(
    public dialogRef: MatDialogRef<DialogAssetUploadComponentDialog>,
    private dialogS: DialogService,
    ) { }

  onNoClick(): void {

    this.dialogRef.close();
  }

  save() {

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

The HTML for the dialog looks like this:

  <mat-dialog-content>
    <mat-checkbox [(ngModel)]="fieldValues['is_blog']">Blog</mat-checkbox>
    </mat-checkbox>
  </mat-dialog-content>

But no matter what I do I'm getting the error:

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-checkbox'.
1. If 'mat-checkbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

It would make sense that FormsModule is missing, but it's not -- I have it in the list of imports in my module.ts file. So why is the dialog not able to find it? Any ideas?

**

Edited...

Here's my app.module:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

// core
import { CoreModule } from './core/core.module';

// shared app/admin
import { SharedModule } from './shared/shared.module';

// routing
import { AppRoutingModule } from './app-routing.module';

// components
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],

  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    CoreModule,
    HttpClientModule,
    SharedModule,
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Here's the shared.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatePipe, DecimalPipe } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule } from '@angular/material';

// dialogs
import { DialogAssetPickerComponent, DialogAssetPickerComponentDialog } from './dialogs/dialog-asset-picker/dialog-asset-picker.component';
import { DialogAssetUploadComponent, DialogAssetUploadComponentDialog } from './dialogs/dialog-asset-upload/dialog-asset-upload.component';
import { DialogConfirmComponent, DialogConfirmComponentDialog } from './dialogs/dialog-confirm/dialog-confirm.component';
import { DialogSearchFilterComponent } from './dialogs/search-filter/search-filter.component';
import { PaginateDialogComponent } from './dialogs/paginate/paginate.component';

// pipes
import { FilterPipe } from './pipes/filter.pipe';
import { ObjArrPipe } from './pipes/objarr.pipe';
import { SafehtmlPipe } from './pipes/safehtml.pipe';

// quill wysiwyg editor
import { QuillModule } from 'ngx-quill';

@NgModule({

  imports: [
    CommonModule,
    FlexLayoutModule,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
  ],

  entryComponents: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
  ],

  declarations: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
    DialogSearchFilterComponent,
    FilterPipe,
    ObjArrPipe,
    PaginateDialogComponent,
    SafehtmlPipe,
  ],

  exports: [
    CommonModule,
    FilterPipe,
    FlexLayoutModule,
    FormsModule,
    ObjArrPipe,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
    QuillModule,
    ReactiveFormsModule,
    SafehtmlPipe,
  ],

  providers: [
    DatePipe,
    DecimalPipe,
    DialogAssetPickerComponent,
    DialogAssetUploadComponent,
    DialogConfirmComponent,
    ObjArrPipe,
  ],

})
export class SharedModule { }

And the admin.module then does this

import { SharedModule } from '../shared/shared.module';
...
  imports: [
    SharedModule,
  ],

Answer 1

You need to import the FormsModule in order to use it for your dependencies; currently, you are just exporting it and your DialogAssetUploadComponentDialog can not find it. Here's what your shared module should look like.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatePipe, DecimalPipe } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule } from '@angular/material';

// dialogs
import { DialogAssetPickerComponent, DialogAssetPickerComponentDialog } from './dialogs/dialog-asset-picker/dialog-asset-picker.component';
import { DialogAssetUploadComponent, DialogAssetUploadComponentDialog } from './dialogs/dialog-asset-upload/dialog-asset-upload.component';
import { DialogConfirmComponent, DialogConfirmComponentDialog } from './dialogs/dialog-confirm/dialog-confirm.component';
import { DialogSearchFilterComponent } from './dialogs/search-filter/search-filter.component';
import { PaginateDialogComponent } from './dialogs/paginate/paginate.component';

// pipes
import { FilterPipe } from './pipes/filter.pipe';
import { ObjArrPipe } from './pipes/objarr.pipe';
import { SafehtmlPipe } from './pipes/safehtml.pipe';

// quill wysiwyg editor
import { QuillModule } from 'ngx-quill';

@NgModule({

  imports: [
    CommonModule,
    FlexLayoutModule,
    FormsModule, // ADDED HERE
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
  ],

  entryComponents: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
  ],

  declarations: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
    DialogSearchFilterComponent,
    FilterPipe,
    ObjArrPipe,
    PaginateDialogComponent,
    SafehtmlPipe,
  ],

  exports: [
    CommonModule,
    FilterPipe,
    FlexLayoutModule,
    FormsModule,
    ObjArrPipe,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
    QuillModule,
    ReactiveFormsModule,
    SafehtmlPipe,
  ],

  providers: [
    DatePipe,
    DecimalPipe,
    DialogAssetPickerComponent,
    DialogAssetUploadComponent,
    DialogConfirmComponent,
    ObjArrPipe,
  ],

})
export class SharedModule { }