[英]How can I set default value of dropdown (select-option) input in Angular 2 reactive form
[英]How can I set my reactive form date input value?
所以我试图显示这个日期以供输入。 但是在我的表单构建器组中设置它的值时它没有显示。 我也希望能够格式化它。
this.post.startDate 是 Date 类型
.ts 中有什么
this.editForm = this.formBuilder.group({
startDate: [this.post.startDate, Validators.compose([Validators.required])],
endDate: [this.post.endDate, Validators.compose([Validators.required])]
});
我的反应形式有这个
<form [formGroup]="editForm" (ngSubmit)="saveDate()">
<label>Start Date: </label>
<input type="date" formControlName="startDate" name="startDate" />
<br />
<label>End Date: </label>
<input type="date" formControlName="endDate" name="endDate" />
<br /><br />
<input type="submit" value="Create Date">
</form>
您有两种可能将日期设置为默认值。
变体 1:
要将默认日期值设置为日期类型的<input>
标记,您应该使用 input-tag 的 HTML 属性value
。
例子:
<form [formGroup]="editForm2">
<input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
<input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>
变体 2(推荐):
您可以在角度使用内置函数formatDate()
。
步骤1:
从组件打字稿文件中的@angular/common
导入formatDate()
。
import { formatDate } from '@angular/common';
注意: formatDate(yourDate, format, locale)
需要 3-4 个参数。
第2步:
在表单组的定义中格式化您的日期。
this.editForm = this.formBuilder.group({
startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});
这是工作示例: https ://stackblitz.com/edit/angular-kucypd
这是输入类型日期的文档: https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
试试内置的formatDate包。
import { formatDate } from '@angular/common'
然后转换您的日期并将其设置为日期选择器控件
this.yourForm.controls.controlName.setValue(formatDate(date,'yyyy-MM-dd','en'));
另一种解决方案,功能更强大的 w 时区偏移,添加绑定和格式转换:
.html:
<form [formGroup]="form">
<input type="date" class="form-control" (change)="onMyDateChange($event)" name="myDate" formControlName="myDate" value="{{ actualDateFormGroup | date:'yyyy-MM-dd' }}" >
</form>
.ts:
actualDateFormGroup = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60000)).toISOString().split("T")[0];
onMyDateChange(event: any) {
this.forma.patchValue({ myDate: event.target.value });
}
然后可以在代码中根据需要修改myDate变量中获取的格式。
例如:2019-10-13 至 20191013
stringFormat(string){
let date = fechaString.replace(/-/g, '');
return date;
}
finalDate = stringFormat(myDate);
我有这个问题。 我的解决方案是:
// another code on constructor ....
this.form = new FormGroup({
createdDate: new FormControl('', Validators.required),
expiredDate: new FormControl('', Validators.required),
// more fields....
});
……
然后,在另一个时刻,我得到了 coupon.createdDate 上的日期值...
this.form.get('createdDate').setValue(new Date(coupon.createdDate).toISOString().split('T')[0]);
就这样。
为输入类型 datetime-local 设置输入日期值虽然有效,但即
<input id="endDate" type="datetime-local" class="form-control />
并在控制器中
this.form.patchValue({
endDate: this.schoolEvent.endDate
});
所以,如果你需要一个日期时间输入,你可以使用上面的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.