在 matdatepicker 字段中动态设置日期值会影响另一个 matDatePicker 字段 Date in Reactive Form
dynamically set the date value in matdatepicker field affect the another matDatePicker field Date in Reactive Form
我的相对形式有两个 matDatePicker 控件(报表日期和开始日期)我已经根据报表日期字段值和月数动态设置开始日期字段的值。
<div [formGroup]="parameters">
<div class="mat-field">
<mat-form-field color="primary">
<mat-label>Statement Date</mat-label>
<input id="statementDate" matInput [matDatepicker]="statementDatePicker" formControlName="statementDate" (dateChange)="datechanged()" >
<mat-datepicker-toggle matSuffix [for]="statementDatePicker"></mat-datepicker-toggle>
<mat-datepicker #statementDatePicker></mat-datepicker>
</mat-form-field>
</div>
<div class="mat-field">
<mat-form-field>
<mat-label>Start Date</mat-label>
<input id="startDate" matInput [matDatepicker]="startDatepicker" formControlName="startDate" readonly [disabled]="parameters.value.period!='other'">
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
<mat-datepicker #startDatepicker></mat-datepicker>
</mat-form-field>
</div>
<div class="mat-field">
<mat-form-field>
<mat-label>Period</mat-label>
<mat-select id="period" matInput formControlName="period" (selectionChange)="datechanged()">
<mat-option value="12">12 Months</mat-option>
<mat-option value="11">11 Months</mat-option>
<mat-option value="10">10 Months</mat-option>
<mat-option value="9">9 Months</mat-option>
<mat-option value="8">8 Months</mat-option>
<mat-option value="7">7 Months</mat-option>
<mat-option value="6">6 Months</mat-option>
<mat-option value="5">5 Months</mat-option>
<mat-option value="4">4 Months</mat-option>
<mat-option value="3">3 Months</mat-option>
<mat-option value="2">2 Months</mat-option>
<mat-option value="1">1 Month</mat-option>
<mat-option value="other">other</mat-option>
</mat-select>
</mat-form-field>
</div>
ts 文件
export class DatepickerMinMaxExample {
parameters: FormGroup
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.parameters = new FormGroup({
'statementDate': new FormControl(null, Validators.required),
'startDate': new FormControl(null, Validators.required),
'period': new FormControl(null, Validators.required),
});
}
public datechanged(){
if(this.parameters.controls['statementDate'].value!=null&& this.parameters.controls['period'].value!=null&& this.parameters.controls['period'].value!='other'){
let stmtDate=this.parameters.controls['statementDate'].value;
let send_date=this.parameters.controls['statementDate'].value;
console.log('statement date: '+ this.parameters.controls['statementDate'].value)
let period=parseInt(this.parameters.controls['period'].value)
let formattedDate : any;
send_date.setMonth(send_date.getMonth()-period);
send_date.setDate(send_date.getDate()+1);
formattedDate=send_date.toISOString().slice(0,10);
console.log('format date: '+ formattedDate)
console.log('stment date after format date: '+ stmtDate)
this.parameters.controls['startDate'].setValue(new Date(formattedDate))
}
}
}
动态更新开始日期值也会影响语句日期 matDatePicker 和值。
请帮我解决这个问题。
提前致谢。
看起来你的datechanged()
函数中的stmtDate
和send_date
是引用类型,指的是this.parameters.controls['statementDate'].value
。因此,更改这两个变量中的任何一个都会更改 statementDatePicker
.
中的日期
对这两个字段进行深度复制,使用 Lodash 中的 cloneDeep
使其正常工作。
const _ = require("lodash");
let stmtDate = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
let send_date = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
(注意:我选择 Lodash 而不是传统的深度复制方法,例如展开运算符 Object.assign()
和 JSON.parse(JSON.stringify(value))
,因为它们不复制函数,而 cloneDeep
来自Lodash 会,在您的情况下,您的 send_date
变量正在使用 setMonth()
等函数)
我分叉了你的 Stackblitz 并做了一个 working example
public datechanged(){
if(this.parameters.controls['statementDate'].value!=null&& this.parameters.controls['period'].value!=null&& this.parameters.controls['period'].value!='other'){
this.parameters.controls['startDate'].setValue(new Date(this.parameters.controls['statementDate'].value))
let startDate=this.parameters.controls['startDate'].value
let period=parseInt(this.parameters.controls['period'].value)
let formattedDate : any;
startDate.setMonth(startDate.getMonth()-period);
startDate.setDate(startDate.getDate()+1);
formattedDate=startDate.toISOString().slice(0,10);
this.parameters.controls['startDate'].setValue(new Date(formattedDate))
}
}
我的相对形式有两个 matDatePicker 控件(报表日期和开始日期)我已经根据报表日期字段值和月数动态设置开始日期字段的值。
<div [formGroup]="parameters">
<div class="mat-field">
<mat-form-field color="primary">
<mat-label>Statement Date</mat-label>
<input id="statementDate" matInput [matDatepicker]="statementDatePicker" formControlName="statementDate" (dateChange)="datechanged()" >
<mat-datepicker-toggle matSuffix [for]="statementDatePicker"></mat-datepicker-toggle>
<mat-datepicker #statementDatePicker></mat-datepicker>
</mat-form-field>
</div>
<div class="mat-field">
<mat-form-field>
<mat-label>Start Date</mat-label>
<input id="startDate" matInput [matDatepicker]="startDatepicker" formControlName="startDate" readonly [disabled]="parameters.value.period!='other'">
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
<mat-datepicker #startDatepicker></mat-datepicker>
</mat-form-field>
</div>
<div class="mat-field">
<mat-form-field>
<mat-label>Period</mat-label>
<mat-select id="period" matInput formControlName="period" (selectionChange)="datechanged()">
<mat-option value="12">12 Months</mat-option>
<mat-option value="11">11 Months</mat-option>
<mat-option value="10">10 Months</mat-option>
<mat-option value="9">9 Months</mat-option>
<mat-option value="8">8 Months</mat-option>
<mat-option value="7">7 Months</mat-option>
<mat-option value="6">6 Months</mat-option>
<mat-option value="5">5 Months</mat-option>
<mat-option value="4">4 Months</mat-option>
<mat-option value="3">3 Months</mat-option>
<mat-option value="2">2 Months</mat-option>
<mat-option value="1">1 Month</mat-option>
<mat-option value="other">other</mat-option>
</mat-select>
</mat-form-field>
</div>
ts 文件
export class DatepickerMinMaxExample {
parameters: FormGroup
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.parameters = new FormGroup({
'statementDate': new FormControl(null, Validators.required),
'startDate': new FormControl(null, Validators.required),
'period': new FormControl(null, Validators.required),
});
}
public datechanged(){
if(this.parameters.controls['statementDate'].value!=null&& this.parameters.controls['period'].value!=null&& this.parameters.controls['period'].value!='other'){
let stmtDate=this.parameters.controls['statementDate'].value;
let send_date=this.parameters.controls['statementDate'].value;
console.log('statement date: '+ this.parameters.controls['statementDate'].value)
let period=parseInt(this.parameters.controls['period'].value)
let formattedDate : any;
send_date.setMonth(send_date.getMonth()-period);
send_date.setDate(send_date.getDate()+1);
formattedDate=send_date.toISOString().slice(0,10);
console.log('format date: '+ formattedDate)
console.log('stment date after format date: '+ stmtDate)
this.parameters.controls['startDate'].setValue(new Date(formattedDate))
}
}
}
动态更新开始日期值也会影响语句日期 matDatePicker 和值。
请帮我解决这个问题。
提前致谢。
看起来你的datechanged()
函数中的stmtDate
和send_date
是引用类型,指的是this.parameters.controls['statementDate'].value
。因此,更改这两个变量中的任何一个都会更改 statementDatePicker
.
对这两个字段进行深度复制,使用 Lodash 中的 cloneDeep
使其正常工作。
const _ = require("lodash");
let stmtDate = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
let send_date = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
(注意:我选择 Lodash 而不是传统的深度复制方法,例如展开运算符 Object.assign()
和 JSON.parse(JSON.stringify(value))
,因为它们不复制函数,而 cloneDeep
来自Lodash 会,在您的情况下,您的 send_date
变量正在使用 setMonth()
等函数)
我分叉了你的 Stackblitz 并做了一个 working example
public datechanged(){
if(this.parameters.controls['statementDate'].value!=null&& this.parameters.controls['period'].value!=null&& this.parameters.controls['period'].value!='other'){
this.parameters.controls['startDate'].setValue(new Date(this.parameters.controls['statementDate'].value))
let startDate=this.parameters.controls['startDate'].value
let period=parseInt(this.parameters.controls['period'].value)
let formattedDate : any;
startDate.setMonth(startDate.getMonth()-period);
startDate.setDate(startDate.getDate()+1);
formattedDate=startDate.toISOString().slice(0,10);
this.parameters.controls['startDate'].setValue(new Date(formattedDate))
}
}