Angular 动态设置matdatepicker字段中的日期值会影响另一个matdatepicker字段的反应式日期
我有两个matDatePicker控件(语句日期和开始日期),在我的创建表单中,我根据语句日期字段值和月数动态设置开始日期字段的值Angular 动态设置matdatepicker字段中的日期值会影响另一个matdatepicker字段的反应式日期,angular,typescript,angular-material,angular-reactive-forms,mat-datepicker,Angular,Typescript,Angular Material,Angular Reactive Forms,Mat Datepicker,我有两个matDatePicker控件(语句日期和开始日期),在我的创建表单中,我根据语句日期字段值和月数动态设置开始日期字段的值 <div [formGroup]="parameters"> <div class="mat-field"> <mat-form-field color="primary"> <mat-label>Statement Date</
<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>
动态更新开始日期值也会影响语句日期matDatePicker和值。
请帮我解决这个问题
提前感谢。您的
datechanged()
函数中的stmtDate
和send\u date
看起来像是引用类型,引用的是this.parameters.controls['statementDate')。value
。因此,更改这两个变量之一会更改语句DatePicker
中的日期
使用cloneDeep
from对这两个字段进行深度复制可以使其正常工作
const _ = require("lodash");
let stmtDate = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
let send_date = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
(注意:我选择了Lodash,而不是传统的深度复制方法,比如spread操作符、Object.assign()
和JSON.parse(JSON.stringify(value))
因为它们不复制函数,而Lodash的cloneDeep
复制函数,在您的情况下,send_date
变量使用的函数有setMonth()
等。)
我把你的闪电战交给了你
const _ = require("lodash");
let stmtDate = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
let send_date = _.cloneDeep(
this.parameters.controls["statementDate"].value
);
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))
}
}