本文介绍了如何在组件的 angular 2 材质上设置数据选择器输入?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经拿到了表单发送的内容
home.component.ts
...构造函数(私有路由:ActivatedRoute){}/*** 获取名称 OnInit*/ngOnInit() {this.form= {邮政编码:this.route.snapshot.params['postcode'],date_from: this.route.snapshot.params['date_from'],date_to: this.route.snapshot.params['date_to']}console.log(this.form);//{邮政编码:WEDSW",date_from:11/09/2017",date_to:16/09/2017"}}
现在我需要做的是填充它做类似 <input value="{{form.data_from}}">
的事情,但它不起作用,当我打开日期选择器时,它会显示当前日期而不是已设置的值在 form
对象
我也得到一个值未被DateAdapter识别为日期对象
我认为这样做可以解决
home.component.html
<div class="日历"><button md-raised-button (click)="pickupDate.open()" class="calendar__ico"></button><button md-raised-button (click)="pickupDate.open()"></button>
<md-form-field><input mdInput [mdDatepicker]="pickupDate"><md-datepicker #pickupDate></md-datepicker></md-form-field>
<div><div class="日历"><button md-raised-button (click)="returnDate.open()"></button><button md-raised-button (click)="returnDate.open()"></button>
<md-form-field><input mdInput [mdDatepicker]="returnDate"><md-datepicker #returnDate></md-datepicker></md-form-field>
解决方案
您可以绑定到 [(ngModel)] 并将其设置为您在表单上获得的值:
模板
<input mdInput [mdDatepicker]="picker" placeholder="选择日期" [(ngModel)]="initialDate"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker></md-datepicker></md-form-field>
组件
initialDate = new Date(2017,10,30);//随着你的date_from,date_to改变
工作plunker 这里
I've already got the content that is sent by a form
home.component.ts
...
constructor(private route: ActivatedRoute){}
/**
* Get the names OnInit
*/
ngOnInit() {
this.form= {
postcode: this.route.snapshot.params['postcode'],
date_from: this.route.snapshot.params['date_from'],
date_to: this.route.snapshot.params['date_to']
}
console.log( this.form); // {postcode: "WEDSW", date_from: "11/09/2017", date_to: "16/09/2017"}
}
now what I need to do it's to populate itdoing something like <input value="{{form.data_from}}">
but it wont work, when I open the datepicker it will show the current day and not the value that has been set in the form
object
I'm also getting a value not recognized as a date object by DateAdapter
that I think could be solve doing this
home.component.html
<div>
<div class="calendar">
<button md-raised-button (click)="pickupDate.open()" class="calendar__ico"></button>
<button md-raised-button (click)="pickupDate.open()"></button>
</div>
<md-form-field>
<input mdInput [mdDatepicker]="pickupDate">
<md-datepicker #pickupDate></md-datepicker>
</md-form-field>
</div>
<div>
<div class="calendar">
<button md-raised-button (click)="returnDate.open()"></button>
<button md-raised-button (click)="returnDate.open()"></button>
</div>
<md-form-field>
<input mdInput [mdDatepicker]="returnDate">
<md-datepicker #returnDate></md-datepicker>
</md-form-field>
</div>
解决方案
You can bind to [(ngModel)] and set it to the values you get on your form:
template
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="initialDate">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>
component
initialDate = new Date(2017,10,30);
//change with your date_from, date_to
Working plunker here
这篇关于如何在组件的 angular 2 材质上设置数据选择器输入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!