Question

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

我在此表单上有一个文本字段，用于从用户收集日期。我想在这个字段上关联一个Angular Material datepicker，但是只要我添加一个＆＃34; formControlName＆＃34;属性到此输入字段，我收到错误：

错误：多个自定义值访问器将表单控件与路径匹配：＆＃39; - ＆GT; ＆＃39;

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

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

我的模型看起来像这样（与此讨论相关的字段是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>

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

0 个答案: