角材料日期选择器不能动态命名

Question

我正在动态生成一种表单，我需要根据模型命名控件。

我正在使用Angular 5和Angular-Material 5。

但是，当我收到以下错误时，我无法动态地命名Picker(Mat-datepicker(。

instrumentsearchcomponent.html：27错误类型： this._datepicker._registerInput不是函数

这就是我尝试使用动态名称创建控制的方式，这导致了上述错误。

 <mat-form-field>
                        <input matInput [matDatepicker]="dynamicName" placeholder="{{ dynamicLabel }}">
                        <mat-datepicker-toggle matSuffix [for]="dynamicName"></mat-datepicker-toggle>
                        <mat-datepicker #{{dynamicName}}></mat-datepicker>
                    </mat-form-field>

两个 dynamicname 和 dynamiclabel 在关联的TS文件中定义了，来自我为字段定义的模型。

如果我删除动态名称并将它们全部替换为静态名称，例如datepicker1或picker1，则一切都起作用，但是我然后努力将静态命名的控制并绑定到我的模型中。

。

静态命名控制的示例。

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

有什么建议吗？谢谢

Answer 1

当一个人将 #identifier分配给角模板中的特定元素时，一个人只是创建带有该名称的局部变量。因此，即使您使用与该循环周期的范围相同的名称也不重要。

假设您是根据数组formData

中的某些数据动态创建表单

formData = [
    {
       id=0,
       type="date-picker",
       label= "label 1"
    }, 
    ...
]

下面的代码应在这种情况下完成您的工作。

<mat-form-field *ngFor="let field of formData">
    <input matInput [matDatepicker]="picker" placeholder="{{ field.Label }}">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

随着每个循环运行的#picker，都用新的输入元素重新启动，这些元素将传递给[matDatepicker]

这与在for循环中重新定位变量相同。

for(let i = 0; i < formData.length ; i++ ){
    // assume <mat-datepicker #picker></mat-datepicker> similar to below line of code.
    let picker = document.createElement("INPUT");
}

Answer 2

从datepicker中删除插值并直接使用动态模板参考名称。

<mat-form-field>
  <input matInput [matDatepicker]="dynamicName" placeholder="{{ dynamicLabel }}" />
  <mat-datepicker-toggle matSuffix [for]="dynamicName"></mat-datepicker-toggle>
  <mat-datepicker #dynamicName></mat-datepicker>
</mat-form-field>

Answer 3

如果动态日期选择器不是您所拥有的，并且您也为输入框创建了局部变量，请确保变量的名称与local变量不同您为日期选择器创建。请参阅下面：

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="datePicker" name="someDate" [ngModel]="someVariable.DATE" #dateRef="ngModel">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

请注意，输入字段的本地变量被命名为 DATEREF ，而date-picker的本地变量被命名为 datepicker ，它们不相同。

Answer 4

i是一个类似的问题，在带有材料的Angular 9的项目中启用常春藤编译器。而且我不知道为什么这与Ivy编译器禁用。

，就我而言，问题是在模板中重复的变量名称。

<mat-form-field class="col-md-4">
      <mat-label>Birth Date: </mat-label>
      <input
        formControlName="birthDate"
        matInput
        [matDatepicker]="birthdt"
        (click)="birthdt.open()"
        (focus)="birthdt.open()"
        #birthdt   <==== HERE, after removed, works 😉
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="birthdt"
      ></mat-datepicker-toggle>
      <mat-datepicker
        startView="multi-year"
        [startAt]="startDate"
        touchUi
        #birthdt  <==== AND HERE
      ></mat-datepicker>
    </mat-form-field>

所以，就是这样。