私はWeb APi上でデータを投稿しようとしていますmyDatePickerしかし、問題は、それは複雑なオブジェクトを送信するだけではなく、日付は、Web APIが読み取ることはできませんが、 データを取得するのとは反対に、JSON形式の日付を受け取って完全に表示します。
私は入力タイプ= "テキスト"を使用しようとすると、それが送信されますデータを完全に、そしてまた、Web APIをそれをフェッチしてデータベースに格納することはできますが、取得中にバインドしません。ここで私のコードは、私がAngular 4.を使用している方法と.net web apiをバックエンドとして使用しています。
`
<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"]);
}
`
これは、datePickerを使用してデータを送信したときの出力です。これはログに記録されています
`
{"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"}
`
私はこのDatePickerを使用しています https://github.com/kekeh/mydatepicker
親切に私を助け、
回答：
回答№1は1myDatepickerの形式を保存時に通常の日付形式に戻します。
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()
);
}
}