面临问题“MatDatepicker 只能与单个输入关联。” Angular 8 材质

Question

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker" class="modifyDate" NoSpecialChar ngModel #dateCtrl="ngModel" name="datepicker" (click)="picker.open()" id="dtDeparture" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="dateCtrl.errors?.required && dateCtrl.touched">Choose a Date       
</mat-error>

<input matInput placeholder="DD/MM/YYYY" [matDatepicker]="picker1" NoSpecialChar class="modifyDate" [(ngModel)]="inputEndDate" name="dtArrival" (click)="picker1.open()" id="dtArrival" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

正如您在上面看到的，我们为日期输入即picker1 和picker 提供了唯一的ID。问题仍然存在“MatDatepicker 只能与单个输入相关联。” 不知从何而来。我需要帮助。我在谷歌和stackover上搜索过，但没有帮助

Answer 1

试试这个用这个替换你的代码并尝试

<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker1">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

指的是包装的组件（例如输入、文本区域、选择等）

Answer 2

我也面临着同样的错误。当您保持 #picker 的名称唯一时，问题就会得到解决

                    <mat-form-field appearance="outline"
                        class="example-full-width input-small-size d-block">
                        <mat-label>Date 1
                        </mat-label>
                        <input matInput type="text" [matDatepicker]="picker1">
                        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                        <mat-datepicker #picker1></mat-datepicker>

                    </mat-form-field>

                    <mat-form-field appearance="outline"
                        class="example-full-width input-small-size d-block">
                        <mat-label>Date 2
                        </mat-label>
                        <input matInput type="text" [matDatepicker]="picker2">
                        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                        <mat-datepicker #picker2></mat-datepicker>

                    </mat-form-field>

您要么使用相同的 #picker（例如 #picker1）两次，要么 #pickername 与 [for] 属性不匹配。对于前。

<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                        <mat-datepicker #picker2></mat-datepicker>

这是错误的，它应该是一致的for [for]="pickerName"并且<mat-datepicker #pickerName></mat-datepicker>