0

我的反应表单中有两个 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 和值。 在此处输入图像描述

在此处输入图像描述

堆栈闪电战

请帮我解决这个问题。

提前致谢。

4

2 回答 2

0

看起来stmtDate和send_date在您的datechanged()函数中是引用类型，指的是this.parameters.controls['statementDate'].value. 因此，更改这两个变量中的任何一个都会更改statementDatePicker.

对这两个字段进行深度复制，使用cloneDeepLodash使其工作。

      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 并做了一个工作示例

于 2020-10-15T15:42:55.240 回答
0 
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))
    }

}
于 2020-10-21T06:57:50.210 回答