Javascript 如何将角度材质日期选择器与反应/模型驱动窗体一起使用？

我有一个被动的（模型驱动的）角度表单，有多个表单组（formGroupName）和控件。此表单上的表单字段由关联TypeScript文件中的FormBuilder控制和填充

我在此表单上有一个文本字段，用于从用户处收集日期。我想在该字段上关联一个角度材质日期选择器，但一旦我将“formControlName”属性添加到此输入字段，我就会得到错误：

错误：多个自定义值访问器将表单控件与路径“->”匹配

我不能使用ngModel（切换到模板驱动的表单），因为此表单上的所有其他内容都是模型驱动的，并且此控件位于formGroupName块中。我试着在这里放一个ngModel，只是为了看看会发生什么，Angular抱怨说我不能在这里混合ngModel

在使用Angular Material的日期选择器提交表单时，如何数据绑定此字段（在TypeScript端设置此字段的初始值），然后获取用户在模板/视图上所做的任何更改？如果Angular Material的日期选择器不支持模型驱动的表单，我愿意使用另一个支持此功能的日期选择器。

我的模型如下所示（与此讨论相关的字段是step1.visitDate）：

我的HTML模板如下所示（相关部分）：

---

这应该行得通，请您在plunker中重现该问题。有关使用material2的工作示例，请看一看。

this.form = this.fb.group({
        step1: this.fb.group({
            representative: [null],
            visitDate: [new Date()],
            category: ["Retail Store Visit"],
            contactType: ["Store Visit"],
            goPakStore: [null],
            goPakLocation: [null],
            eventType: ["Outreach"],
            eventDescription: [null],
            servicePlaza: [null],
            inventoryLocation: [null]
        }),
        step2: this.fb.group({
            inventoryItemLocation: [null],
            quantityAvailable: [null],
            quantityDistributed: [null],
        })
    });

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
<md-card class="users-listing" formGroupName="step1">
    <md-card-content>
        <div>
            <md-input-container style="width:98%;">
                <input mdInput placeholder="Visit Date" [mdDatepicker]="visitDatePicker" formControlName="visitDate" required trim maxlength="10">
                <button mdSuffix [mdDatepickerToggle]="visitDatePicker"></button>
            </md-input-container>
            <md-datepicker #visitDatePicker></md-datepicker>
        </div>
    </md-card-content>
</md-card>