Angular 8中matDatepicker内*ngIf控制移除按钮不显示问题求助

看起来你遇到的问题核心在于disabled状态的表单控件默认不会被包含在formGroup.value中，导致你的*ngIf条件始终不成立，按钮一直处于隐藏状态。咱们一步步来解决：

问题根源分析 #

你初始化dateTo控件时用了：

dateTo: new FormControl({ value: '', disabled: true }),

Angular的FormGroup.value默认会排除所有disabled状态的控件，所以formGroup.value.dateTo的值其实是undefined，自然*ngIf="formGroup.value.dateTo"会返回false，按钮就看不到了。

解决方案 #

这里有几个靠谱的解决办法，选你觉得顺手的就行：

方法1：使用getRawValue()获取包含disabled控件的完整值 #

getRawValue()会返回表单中所有控件的值，不管是否disabled。把你的*ngIf条件改成：

<button *ngIf="formGroup.getRawValue().dateTo" mat-button mat-icon-button matSuffix (click)="resetDateTo()">
  <mat-icon [inline]="true">close</mat-icon>
</button>

方法2：直接访问FormControl实例的value #

在组件类里添加一个getter，方便模板直接访问控件：

get dateToControl(): FormControl {
  return this.formGroup.get('dateTo') as FormControl;
}

然后模板里改成：

<button *ngIf="dateToControl.value" mat-button mat-icon-button matSuffix (click)="resetDateTo()">
  <mat-icon [inline]="true">close</mat-icon>
</button>

这种方式更直观，也避免了formGroup.value的坑。

方法3：确保控件启用后再判断（如果你的控件会动态启用） #

如果后续你会通过this.formGroup.get('dateTo').enable()启用控件，那formGroup.value.dateTo就会正常返回值，但这种方式不如前两种可靠，因为只要控件是disabled状态，条件就会失效。

额外验证点 #

另外可以检查下按钮的布局：两个matSuffix元素（清除按钮和日期选择器切换按钮）会不会互相覆盖？不过你说完全看不到元素，大概率还是*ngIf的条件问题，先解决这个再说。

试试上面的方法，应该就能看到清除按钮啦！

内容的提问来源于stack exchange，提问作者siavash bashiri