Angular Material Datepicker 以编程方式设置最小值答案

【问题标题】：Angular Material Datepicker set min programmaticallyAngular Material Datepicker 以编程方式设置最小值
【发布时间】：2021-02-03 22:01:35
【问题描述】：

如果我更改第一个日期选择器，我正在尝试设置第二个日期选择器的最小值，但我无法做到：

我有这两个日期选择器

<mat-form-field>
        <span *ngIf="item.type=='date' && item.hijoDate">
            <input matInput [id]="item.key" [matDatepicker]="picker"
            [min]="minDatePadre" [max]="maxDatePadre"
            (dateChange)="seleccionaFecha($event, 'padre', item.hijoDate)" 
            readonly [placeholder]="item.label" [formControlName]="item.key">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </span>
            <span *ngIf="item.type=='date' && item.padreDate">
              <input matInput [id]="item.key" [matDatepicker]="picker1"
              [min]="minDateHijo" [max]="maxDateHijo" 
              (dateChange)="seleccionaFecha($event, 'hijo', item.padreDate)"
              readonly [placeholder]="item.label" [formControlName]="item.key">
              <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
              <mat-datepicker #picker1></mat-datepicker>
            </span>
</mat-form-field>

在组件中我有以下内容：

minDatePadre= new Date(2010, 1, 1);
maxDatePadre= new Date(2020, 0, 1);
minDateHijo= new Date(2010, 1, 1);
maxDateHijo= new Date(2020, 0, 1);

我初始化了值，它完美地工作并在每个日期选择器中显示最大值和最小值，但是当我尝试更改值时它在这里不起作用：

seleccionaFecha(event, tipo, elemento){


    if(tipo == 'padre'){
      let fechaHijo = this.form.controls[elemento].value;
      let fechaPadre = event.value;
      if(fechaPadre>fechaHijo){//SI LA FECHA INICIAL ES IGUAL 
        this.form.controls[elemento].setValue(fechaPadre);        
      }

      this.minDateHijo=new Date(2019, 1, 23);      
    }
    else if(tipo == 'hijo'){
      let fechaPadre = this.form.controls[elemento].value;
      let fechaHijo = event.value;


    }


  }

当它符合条件时，我改变了

this.minDateHijo

但什么都没有改变，也没有显示任何错误，我不知道如何更新该值，请帮助，谢谢

更新：我可以看到的行为是最小值已更新，但 datepicker 直到我在子 datepicker 中选择了某个值然后它才会刷新，我需要找到一种方法来更新 datepicker旅途中的最小值。

更新：这是带有示例的 stackblitz url：

https://stackblitz.com/edit/angular-szjuq1

我想要的是选择第一个日期选择器，然后在第二个日期选择器中设置最小日期，但是当我选择第一个日期选择器时，它只会更新他而不是下一个，因为我动态创建它，谢谢你能告诉我一些方法。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

查看源代码时，我们可以看到MatDatepickerInput 没有实现OnChanges 生命周期钩子，并且min @Input 映射到一个getter，它调用this._validatorOnChange，但该函数设置为() => {}。

那么，你观察到的行为是正常的，这个控件并不是为了动态改变min的值而设计的。如果您想添加该功能，我建议您在 GitHub 上打开一个问题。

编辑：

功能请求已提交，并且已在主分支上提交修复，因此它应该在最新版本中可用：https://github.com/angular/components/issues/19907

【讨论】：

【解决方案2】：

这个问题很老，但我遇到了同样的问题，我设法让它像这样工作

基本上你需要检测变化，因为 Angular 组件使用 OnPush

dynamic-form-question.component

import { ChangeDetectorRef, Component, Input } from "@angular/core";
import { FormGroup } from "@angular/forms";

import { QuestionBase } from "./question-base";
const addDays = (date, days) => {
  date.setDate(date.getDate() + days);
  return date;
};
@Component({
  selector: "app-question",
  templateUrl: "./dynamic-form-question.component.html"
})
export class DynamicFormQuestionComponent {
  @Input() question: QuestionBase<any>;
  @Input() form: FormGroup;
  minDate1 = new Date();
  minDate2 = new Date();
  get isValid() {
    return this.form.controls[this.question.key].valid;
  }

  constructor(private cdr: ChangeDetectorRef) {} // <-- Change DETECTION

  cambio() {
    this.minDate1 = addDays(this.minDate1, 6);
    this.minDate2 = addDays(this.minDate2, 8);
    this.cdr.detectChanges();// <-- Change DETECTION
  }
}

这里是工作堆栈闪电战Example

【讨论】：