如何使用具有被动/模型驱动形式的角度材质Datepicker？

我有一个具有多个表单组（formGroupName）和控件的反应（模型驱动）角形式 . 此表单上的表单字段由关联TypeScript文件中的FormBuilder控制和填充 .

I have a text field on this form that I'm using to collect a date from the user. I wanted to associate an Angular Material datepicker on this field but as soon as I add a "formControlName" attribute to this input field, I get the error:

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

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

How can I data-bind this field (set the initial value for this field on the TypeScript side) and then get any changes made by the user on the template/view when the form is submitted while using Angular Material's datepicker? If Angular Material's date picker doesn't support Model-driven forms, I'm willing to use another date-picker that supports this feature.

我的模型看起来像这样（与此讨论相关的字段是step1.visitDate）：

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],
        })
    });

我的HTML模板看起来像这样（相关部分）：

<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>