如何在组件的角度2材料上设置数据贴纸输入？

Question

我已经获得了表单发送的内容

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"}
}

现在我需要做什么来填充它 做<input value="{{form.data_from}}">之类的事情，但它不起作用，当我打开日期选择器时，它将显示当前日期而不是form对象中设置的值

我还得到value not recognized as a date object by DateAdapter 我认为可以解决这个问题

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>

Answer 1

您可以从角材料文档https://github.com/angular/material2的此片段中了解一些信息。

<强> html的

[0:] System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.MissingMethodException: Attempted to access a missing method.
  at (wrapper managed-to-native) System.Exception:nIsTransient (int)
  at System.Exception.get_IsTransient () [0x00000] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
  at (wrapper managed-to-native) System.Reflection.MonoMethod:InternalInvoke (System.Reflection.MonoMethod,object,object[],System.Exception&)
  at System.Reflection.MonoMethod.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) [0x00032] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
   --- End of inner exception stack trace ---
  at System.Reflection.MonoMethod.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) [0x0004b] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
  at System.Reflection.MonoProperty.GetValue (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] index, System.Globalization.CultureInfo culture) [0x00038] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
  at System.Reflection.PropertyInfo.GetValue (System.Object obj) [0x00000] in <896ad1d315ca4ba7b117efb8dacaedcf>:0 
  at Fantom.Helpers.Global.GetAllProperties (System.Object obj) [0x00034] in ... 
  at Fantom.ViewModel.SignUpViewModel+<<FirebaseSignUp>b__20_0>d.MoveNext () [0x00340] in ...

<强> .TS

<h2>Result</h2>
<p>
  <md-datepicker-toggle [for]="resultPicker"></md-datepicker-toggle>
  <md-form-field>
    <input mdInput #resultPickerModel="ngModel" [mdDatepicker]="resultPicker" [(ngModel)]="date" placeholder="Pick a date" (dateInput)="onDateInput($event)" (dateChange)="onDateChange($event)">
    <md-datepicker #resultPicker [startAt]="startAt">
    </md-datepicker>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
      "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
    </md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
  </md-form-field>
</p>
<p>Last input: {{lastDateInput}}</p>
<p>Last change: {{lastDateChange}}</p>

<强>浏览器

Answer 2

您可以绑定到[（ngModel）]并将其设置为您在表单上获得的值：

<强>模板

<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>

<强>组件

initialDate = new Date(2017,10,30);
//change with your date_from, date_to

工作人员here