[英]Angular Material 2 Datepicker with dynamic name
我正在尝试使用动态名称实现datepicker组件。
我正在使用Angular 4开发基于Angular Material 2的项目,这是我的实现:
<input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}"> <button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button> <md-datepicker #start{{column.name}}Picker></md-datepicker>
其中column.name
在我的html页面中动态更改。
在运行时我收到此错误:
ERROR TypeError: this._datepicker._registerInput is not a function
你对这个错误的原因有什么看法吗?
注意:使用mdDatepicker
和mdDatepickerToggle
属性中的静态值替换column.name
可以解决问题,但我的目标是使用动态值运行此代码
编辑:使用mdDatepicker
和mdDatepickerToggle
属性中的静态值替换column.name
只能解决运行时错误。 但是只有在所有内容都是静态的情况下才会触发#start{{column.name}}Picker
,这意味着甚至名称#start{{column.name}}Picker
md-datepicker
#start{{column.name}}Picker
必须包含一个静态值
我相信更好的解决方案是在迭代数组时使用索引
<div *ngFor="let column of columns; let i=index">
<input mdInput [mdDatepicker]="i" placeholder="Start {{column.label}}" name="{{column.name}}">
<button mdSuffix [mdDatepickerToggle]="i"></button>
<md-datepicker #i></md-datepicker>
</div>
这样,您可以通过元素ref单独访问每个元素
我想指出@yurzui在与问题相关的评论中提出的解决方案 ,因此每个人都可以看到:
<div *ngFor="let column of columns"> <input mdInput [mdDatepicker]="startPicker" placeholder="Start {{column.label}}"> <button mdSuffix [mdDatepickerToggle]="startPicker"></button> <md-datepicker #startPicker></md-datepicker> </div>
columns = [
{
label: 'column1',
name: 'name1'
},
{
label: 'column1',
name: 'name1'
},
{
label: 'column1',
name: 'name1'
}
]
在反应式表单数组中使用动态材质datepicker时,使用索引直接与formGroupName冲突。 使用“ii”解决了我的问题。
<div *ngFor="let item of myForm.get('myFormArray').controls; let i = index"> <div [formGroupName]="i"> <mat-form-field> <input matInput formControlName="myDate" [matDatepicker]="ii" /> <mat-datepicker-toggle matSuffix [for]="ii"></mat-datepicker-toggle> <mat-datepicker #ii touchUi></mat-datepicker> </mat-form-field> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.