如何解决来自日期选择器的响应形式的 Angular 6 格式日期
我正在尝试将 Angular 6 与反应形式一起使用,并格式化从日期选择器获取的日期值,该日期值将被传递到下一阶段。
在我使用反应形式转换日期格式的示例代码中,当我第一次从日期选择器中选择日期时,它正在工作。但是,当我之后编辑其他输入字段时,之前输入的日期值返回到 Moment 对象,并且只有最后选择的日期格式正确。
预期结果(示例):
{ users: [name: a,start: 2021/11/20,end: 2022/10/15]}
实际结果:
{ users: [name: a,start: Moment {_isAMomentObject: true,_i: {…},_isUTC: false,_pf: {…},_locale: Locale,…},end: 2022/10/15]}
TS 代码:
userForm: FormGroup;
ngOnInit() {
this.createuserForm();
}
createuserForm() {
this.userForm = this.formBuilder.group({
users: this.formBuilder.array([this.createEachUser()])
});
}
createEachUser(): any {
return this.formBuilder.group({
name: this.formBuilder.control(null,[Validators.required]),start: this.formBuilder.control(null,end: this.formBuilder.control(null,});
}
convertDate(moment,startend,i) {
const date = moment.value['_d']; // moment is Moment Object
const newDate = new Date(date).toISOString().split('T')[0]; // ex: 2021/11/20
this.userForm.value.users[i][startend] = newDate;
}
submit() {
console.log(this.userForm.value)
}
HTML:
<form (ngSubmit)="submit()" [formGroup]="userForm" novalidate>
<div formArrayName="users" *ngFor="let user of userForm.controls.users?.value; let i = index;">
<div class="col">
<label class="label">Name:</label>
<input class="form-control" type="text" id="name" name="name" formControlName="name" required>
</div>
<div class="col">
<label class="label">Start:</label>
<input class="form-control" [matDatepicker]="startpicker" (click)="startpicker.open()" id="start" name="start" formControlName="start" (dateChange)="convertDate($event,'start',i)" required>
<mat-datepicker-toggle matSuffix [for]="startpicker"></mat-datepicker-toggle>
<mat-datepicker #startpicker></mat-datepicker>
</div>
<div class="col">
<label class="label">End:</label>
<input class="form-control" [matDatepicker]="endpicker" (click)="endpicker.open()" id="end" name="end" formControlName="end" (dateChange)="convertDate($event,'end',i)" required>
<mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
<mat-datepicker #endpicker></mat-datepicker>
</div>
</div>
<button type="submit">submit</button>
</form>
请提出建议。
解决方法
我在格式化日期时遇到了类似的问题,这就是我想出的:(我不使用 mat-datepicker)
HTML
<form [formGroup]="form">
<br>
<input formControlName="date" id="date" type="date" />
<br>
{{form.value.date | date: 'yyyy/MM/dd' }}
</form>
.TS
import { Component } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
@Component({
selector: 'app-date',templateUrl: './date.component.html',styleUrls: ['./date.component.scss']
})
export class DateComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
date: ['']
});
}
}
添加验证器:
date: ['',Validators.requiredTrue]
对于不同类型的日期格式,请查看:https://angular.io/api/common/DatePipe
在代码中格式化日期看看这个API(不适合这个例子但给你一个提示):
datetimeVal: Date;
this.formattedIsoTime = this.datetimeVal.toISOString();
this.formattedLocaleTime = this.datetimeVal.toLocaleDateString()
this.formattedUTCTime = this.datetimeVal.toUTCString();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。