Missing controls using Angular2 Reactive Forms

I'm ruing into a strange error with Angular2 and FormBuilder. The example I've put together has first name, last name fields along with a submit button. However, when run using Material, the two pre-loaded values display, but not the submit button. The submit button is actually present in the HTML, so you can tab to it and do a submit. However, changed values are not submitted. Here is a screen shot:

It's not caused by Material, however. Removing Material directives:

I'm baffled why this apparently simple form fails. Suggestions?

app.component.html:

app.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

interface Name {
  firstName: string;
  lastName: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
//  templateUrl: './app.component2.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'Using FormBuilder';
  myForm: FormGroup;
  data: Name;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {

    this.data = this.loadData();
    this.myForm = this.createForm();
  }

  ngOnDestroy () {

  }

  onSubmit() {
    console.log("name=", JSON.stringify(this.data));
  }

  private loadData(): Name {
    const result: Name = {
      "firstName": "John",
      "lastName": "Doe"
    }

    return result;
  }

  private createForm(): FormGroup {
    const result: FormGroup = this.fb.group({
      "firstName": [this.data.firstName, [Validators.required]],
//      "lastName": [this.data.lastName, [Validators.required, MyValidators.validateName]]
      "lastName": [this.data.lastName, [Validators.required]]
    });
    return result;
  }
}