Angular TypeScript 如何分配日期
Angular TypeScript how to assign Date
如何将日期绑定到日期选择器?
const TodayDate = "19-11-2020";
ngOnInit() {
this._MyregisterForm = this.formBuilder.group({
today_Date:[this.TodayDate, [Validators.required]]
});
}
HTML
<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
<input type="date" formControlName="today_Date" value="{{TodayDate}}">
</form>
删除 value="{{TodayDate }}"
您正在将控件与 TodayDate 值绑定,这就足够了。
我会尝试在您的应用中将日期保持为 javascript 日期。
这将使它们更容易以不同的方式格式化并将它们与 angular 材料日期选择器一起使用。
使用库 date-fns 将字符串解析为日期。
https://date-fns.org/v2.16.1/docs/parse
然后将该日期传递到 formBuilder。
使用formControlName
时无需在输入中放入value
属性
component.html
<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
<input type="date" formControlName="today_Date">
<button type="submit">Submit</button>
</form>
component.ts
import { Component, VERSION } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DatePipe } from "@angular/common";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
providers: [DatePipe]
})
export class AppComponent {
_MyregisterForm: FormGroup;
TodayDate = "19-11-2020";
constructor(private formBuilder: FormBuilder, private datePipe: DatePipe) {
this._MyregisterForm = this.formBuilder.group({
today_Date: [this.getTransformedDate(this.TodayDate), Validators.required]
});
}
private getTransformedDate(date) {
let date1 = date.split("-");
let newDate = date1[2] + "-" + date1[1] + "-" + date1[0];
return newDate;
}
onSubmit() {
const date = this.datePipe.transform(
this._MyregisterForm.get("today_Date").value,
"dd-MM-yyyy"
);
alert(date);
}
}
我提供了一个 Stackblitz just here。
日期格式不好,需要使用国际格式。
而且,就像大家说的,你不需要绑定一个value
.
_MyregisterForm: FormGroup;
TodayDate = "2020-12-10";
constructor(private formBuilder: FormBuilder) {
this._MyregisterForm = this.formBuilder.group({
today_Date: [this.TodayDate, Validators.required]
});
}
<form [formGroup]="_MyregisterForm">
<input type="date" formControlName="today_Date">
</form>
<pre>{{ _MyregisterForm.value | json }}</pre>
TodayDate
应该是;
TodayDate = new Date();
并从 input
中删除 value
属性
如何将日期绑定到日期选择器?
const TodayDate = "19-11-2020";
ngOnInit() {
this._MyregisterForm = this.formBuilder.group({
today_Date:[this.TodayDate, [Validators.required]]
});
}
HTML
<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
<input type="date" formControlName="today_Date" value="{{TodayDate}}">
</form>
删除 value="{{TodayDate }}"
您正在将控件与 TodayDate 值绑定,这就足够了。
我会尝试在您的应用中将日期保持为 javascript 日期。 这将使它们更容易以不同的方式格式化并将它们与 angular 材料日期选择器一起使用。
使用库 date-fns 将字符串解析为日期。
https://date-fns.org/v2.16.1/docs/parse
然后将该日期传递到 formBuilder。
使用formControlName
value
属性
component.html
<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
<input type="date" formControlName="today_Date">
<button type="submit">Submit</button>
</form>
component.ts
import { Component, VERSION } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DatePipe } from "@angular/common";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
providers: [DatePipe]
})
export class AppComponent {
_MyregisterForm: FormGroup;
TodayDate = "19-11-2020";
constructor(private formBuilder: FormBuilder, private datePipe: DatePipe) {
this._MyregisterForm = this.formBuilder.group({
today_Date: [this.getTransformedDate(this.TodayDate), Validators.required]
});
}
private getTransformedDate(date) {
let date1 = date.split("-");
let newDate = date1[2] + "-" + date1[1] + "-" + date1[0];
return newDate;
}
onSubmit() {
const date = this.datePipe.transform(
this._MyregisterForm.get("today_Date").value,
"dd-MM-yyyy"
);
alert(date);
}
}
我提供了一个 Stackblitz just here。
日期格式不好,需要使用国际格式。
而且,就像大家说的,你不需要绑定一个value
.
_MyregisterForm: FormGroup;
TodayDate = "2020-12-10";
constructor(private formBuilder: FormBuilder) {
this._MyregisterForm = this.formBuilder.group({
today_Date: [this.TodayDate, Validators.required]
});
}
<form [formGroup]="_MyregisterForm">
<input type="date" formControlName="today_Date">
</form>
<pre>{{ _MyregisterForm.value | json }}</pre>
TodayDate
应该是;
TodayDate = new Date();
并从 input
value
属性