Angular Material Design dialog and validation

<!DOCTYPE html>
<html>

  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
  </head>

  <body>
    <my-app>
      loading...
        <button mat-button class="btn btn-primary pull-right" type="button" (click)="openDialog();" matTooltip="test">Do Dialog</button>
    </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'


platformBrowserDynamic().bootstrapModule(AppModule);

export class Remark {
      public contents: string;
    public userName: string;
    public dateCreated: datetime;
}
export interface DialogData {
  newComment: Remark;
}

  openDialog(): void {
    this.newComment = new Remark();
    const dialogRef = this.dialog.open(CommentAddDialogComponent,
      {
        width: '500px',
        disableClose: true,
        data: {
          newComment: this.newComment
        }
      });
    dialogRef.beforeClose().subscribe(result => {  } );


    dialogRef.afterClosed().subscribe(result => {
      console.log('The add comment dialog was closed');
      if (result) {
        this.newComment.dateCreated = (new Date()).toISOString();
        this.newComment.userName = this.strUsername;
        this.remarks.push(this.newComment);
      }
    });
  }

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name: string;
  constructor() {
    this.name = `Plunker! v${VERSION.full}`;
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.0",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^5.2.4",
        "@angular/compiler": "^5.2.4",
        "@angular/core": "^5.2.4",
        "@angular/platform-browser": "^5.2.4",
        "@angular/platform-browser-dynamic": "^5.2.4",
        "core-js": "^2.5.3",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20"
    },
    "plnkr": {
        "runtime": "system"
    }
}

<h1 mat-dialog-title>Add New Comment</h1>
<!--{{data.newComment.contents}}-->

  <div mat-dialog-content>
    <div class="row">
      <mat-form-field class="mat" style="width:100%">
        <textarea matInput placeholder="Comment" name="Comment"
                  #Comment id="Comment" [(ngModel)]="data.newComment.contents"
                  required
                  matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
      </mat-form-field>
    </div>
  </div>
  There's other stuff that I would have here; more data interaction.

  <div mat-dialog-actions>
    <button mat-raised-button (click)="onNoClick()">No Thanks</button> &nbsp;
    <button mat-raised-button [mat-dialog-close]="data.newComment" [disabled]="formisvalid" cdkFocusInitial
            matTooltip="Make sure all required fields are filled in." type="submit">Ok</button>
  </div>

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'
import { DialogData } from '../comments/comments.component'
import { FormGroup } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';

@Component({
  selector: 'app-comment-add-dialog',
  templateUrl: './comment-add-dialog.component.html',
  styleUrls: ['./comment-add-dialog.component.scss']
})
export class CommentAddDialogComponent implements OnInit {

  form: FormGroup;

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

  onNoClick(): void {
    this.dialogRef.close();
  }
  onOkClick(): boolean {
    //this.dialogRef.close();
    return true;
  }

  ngOnInit() {
  }

  interpolationDebugger(item) {
    debugger;
  }

}