Angular 4 Reactive Form Date non contractuelle

Question

J'essaie de publier des données sur Web APi en utilisant myDatePicker mais le problème est, il envoie un objet complexe au lieu de seulement Date, que l'API Web ne peut pas lire, alors que son opposé quand il vient à récupérer les données, il reçoit la date formatée JSON et l'afficher parfaitement. Si j'essaie d'utiliser input type = "text" alors il envoie les données parfaitement et aussi web api peut le récupérer et le stocker sur la base de données, mais il ne le lie pas pendant la récupération, voici mon code, par la façon dont j'utilise Angular 4. et .net web api comme backend.

` 
<div class="panel panel-primary"> 
<div class="panel-heading"> 
    {{pageTitle}} 
</div> 

<div class="panel-body"> 
    <form class="form-horizontal" 
      novalidate 
      (ngSubmit)="saveDetails()" 
      [formGroup]="registrationForm" > 
     <fieldset> 
      <div class="form-group" > 
       <label class="col-md-2 control-label" for="firstNameId">Name</label> 

       <div class="col-md-8"> 
        <input class="form-control" 
          id="NameId" 
          type="text" 
          placeholder="Name (required)" 
          formControlName="Name" /> 
       </div> 

      </div> 

      <div class="form-group" > 
       <label class="col-md-2 control-label" for="lastNameId">SurName</label> 

       <div class="col-md-8"> 
        <input class="form-control" 
          id="surNameId" 
          type="text" 
          placeholder="Sur Name" 
          formControlName="SurName" /> 
       </div> 
      </div> 

      <div class="form-group" > 
       <label class="col-md-2 control-label" for="countryID">Country</label> 
       <!-- [formControl]="registrationForm.controls['countryID']" --> 
       <div class="col-md-8"> 
        <select class="form-control" formControlName="countryID"> 
         <option value="0" >--Select--</option> 
         <option *ngFor="let cont of country" 
           value={{cont.cid}} > 
          {{cont.CName}} 
         </option> 
        </select> 
       </div> 
      </div> 

      <div class="form-group" > 
       <label class="col-md-2 control-label" for="Dob">Date of Birth</label> 

       <div class="col-md-8"> 
        <!-- <my-date-picker name="mydate" [options]="myDatePickerOptions" 
        formControlName="Dob" 
        (dateChanged)="onDateChanged($event)" 
        ></my-date-picker> --> 

        <input type="date" class="form-control" formControlName="Dob" /> 
       </div> 
      </div> 
      <div class="form-group"> 
        <label class="col-md-2 control-label" for="gender">Gender</label> 
        <div class="radio col-md-2"> 
         <label><input type="radio" formControlName="gender" value="male" >Male</label> 
        </div> 
        <div class="radio col-md-2"> 
         <label><input type="radio" formControlName="gender" value="female">Female</label> 
        </div> 
      </div> 

      <div class="form-group" > 
        <label class="col-md-2 control-label" for="firstNameId">Address</label> 
        <div class="col-md-8"> 
         <input class="form-control" 
           id="addressId" 
           type="text" 
           placeholder="address" 
           formControlName="Address" /> 
        </div> 
       </div> 

      <div class="form-group"> 
       <div class="col-md-4 col-md-offset-2"> 
        <span> 
         <button class="btn btn-primary" 
           type="submit" 
           style="width:80px;margin-right:10px" 
           [disabled]='!registrationForm.valid' 
           > 
          Save 
         </button> 

        </span> 
       </div> 
      </div> 
     </fieldset> 
    </form> 
    <div class='has-error' *ngIf='errorMessage'>{{errorMessage}}</div> 
</div> 

import { Component , OnInit } from '@angular/core'; 
import { FormBuilder,FormControlName,Validators,FormGroup } from '@angular/forms'; 

import { ActivatedRoute, Router } from '@angular/router'; 

import { Observable } from 'rxjs/Observable'; 
import { Subscription } from 'rxjs/Subscription'; 

import { IRegistration } from './reg'; 
import { ICountry } from './country'; 


import {IMyDpOptions , IMyDateModel} from 'mydatepicker'; 

import { RegistrationService } from './registration.service'; 

@Component({ 
    selector: 'reg-form', 
    templateUrl: 'app/registration-form.component.html' 
}) 
export class RegistrationFormComponent implements OnInit { 
country : ICountry[]; // this is used to loop countries 
registrationForm: FormGroup; 
registration : IRegistration; 
private sub: Subscription; 
pageTitle: string; 

constructor(private registrationService: RegistrationService, 
      private route: ActivatedRoute, 
      private router: Router, 
      private formBuilder: FormBuilder){} 

ngOnInit(): void{ 
    this.registrationForm = this.formBuilder.group({ 
     Name: ['',Validators.required], 
     SurName: ['',Validators.required], 
     countryID: ['',Validators.required], 
     Dob: [null], 
     gender: ['',Validators.required], 
     Address: ['',Validators.required] 
    }); 
    // this.getCountry(); 
    this.sub = this.route.params.subscribe(
     paramns => { 
      let id = +paramns['id']; // this +paramns['id'] will convert id from string to integer 
      this.getRegistration(id); 
     } 
    ) 
} 

public myDatePickerOptions: IMyDpOptions = { 
    dateFormat: 'dd/mm/yyyy', 

}; 
getRegistration(id: number): void{ 

    this.getCountry(); 
    this.registrationService.getRegistration(id) 
    .subscribe((reg: IRegistration) => this.onRegistrationRetrieved(reg)); 
} 
onRegistrationRetrieved(reg: IRegistration) : void{ 
    if(this.registrationForm){ 
     this.registrationForm.reset(); 
    } 

    this.registration = reg; 
    if(this.registration.id === 0){ 
     this.pageTitle = "New Registration"; 
    }else{ 
     this.pageTitle = "Edit Registration Detail"; 
    } 

    var a = new Date(this.registration.Dob); 
    var d = a.getDate()+'-'+ a.getMonth()+ '-'+ a.getFullYear(); 

    // alert(a); 
    if(this.registration.id !== 0){ 
    // Important Note:- FormName (Properties name) must be same.. 
    this.registrationForm.patchValue({ 
     Name: this.registration.Name, 
     SurName: this.registration.SurName, 
     Address: this.registration.Address, 
     gender : this.registration.gender, 
     countryID: this.registration.countryID, 
     Dob : { date:{ year:a.getFullYear(), month: a.getMonth(), day: a.getDate() } } 
    }); 
    } 

} 
getCountry(){ 
    this.registrationService.getCountries().subscribe 
    ((cont: ICountry[])=> this.country = cont); 
} 

saveDetails(){ 

    if(this.registrationForm.dirty && this.registrationForm.valid){ 
     let p = Object.assign({},this.registration,this.registrationForm.value); 
     this.registrationService.saveRegistration(p) 
     .subscribe(
      () => this.onSaveComplete() 
     ); 
    } 
} 
onSaveComplete(){ 
    this.registrationForm.reset(); 
    this.router.navigate(['List']); 
} 

` 

c'est la sortie lors de l'envoi des données à l'aide datepicker je suis connecté il

` 
{"Name":"Sean","SurName":"Tom","countryID":"3","Dob":{"date":{"year":2017,"month":9,"day":5},"jsdate":"2017-09-04T18:30:00.000Z","formatted":"05/09/2017","epoc":1504549800},"gender":"male","Address":"saa"} 
` 

j'ai utilisé cette DatePicker https://github.com/kekeh/mydatepicker

bien vouloir me aider,

Answer 1

Je convertir la date du format de myDatepicker revenir à un format de date régulière sur save:

saveDetails(){ 
    if(this.registrationForm.dirty && this.registrationForm.valid){ 
    let myDateObj = this.registrationForm.value.Dob.date; 

    // myDatepicker uses kind of a non-standard format, 
    // hence the strange conversion required 
    let convertedDate = new Date(
     myDateObj.year, 
     myDateObj.month-1, 
     myDateObj.day); 

    let p = Object.assign({},this.registration,this.registrationForm.value, { 
     Dob: convertedDate 
    }); 
    this.registrationService.saveRegistration(p) 
    .subscribe(
     () => this.onSaveComplete() 
    ); 
    } 
}