角材料日期选择器自动添加日期答案

【问题标题】：Angular material date picker add dates automatically角材料日期选择器自动添加日期
【发布时间】：2022-01-07 12:40:07
【问题描述】：

目前，我正在处理 Angular 项目，我有两个 Angular 日期选择器，我需要通过从第一个日期选择器值添加 7 天来更新第二个日期选择器值

template file
    <form [formGroup]="form">
           
            <input
              matInput
              [matDatepicker]="picker2"
              formControlName="dateOne"
            />
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>

            <input
              matInput
              [matDatepicker]="picker3"
              formControlName="dateTwo"
              class="mainfield"
            />
            <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
</form>
ts file
  form = this.fb.group(
    {
    
     dateOne: ["", [Validators.required]],
     dateTwo: ["", [Validators.required]],
}
)

【问题讨论】：

标签： angular angular-material

【解决方案1】：

当您使用 Angular Reactive 表单时，您可以通过 valueChanges observable 监听 dateOne 表单控件值的变化并设置 dateTwo 表单控件值。

    this.form.get('dateOne')?.valueChanges.subscribe(date => {
      const dateTwo = new Date(new Date(date).setDate(date.getDate() + 7));
      this.form.get('dateTwo')?.setValue(dateTwo);
    });

PS：有问题的表单控件名称在 ts 和 html 文件中不同。以上代码 sn -p 假设控件名称分别为dateOne 和dateTwo。

【讨论】：

【解决方案2】：

当您使用 Angular Reactive 表单时，您可以通过 valueChanges observable 监听 dateOne 表单控件值的变化，并设置 dateTwo 表单控件值。

this.form.get('dateOne')?.valueChanges.subscribe(date => {
  const dateTwo = formatDate(new Date()+ 7, 'MM/dd/yyyy', 'en');
  this.form.get('dateTwo')?.setValue(dateTwo);
});

【讨论】：