在 Angular 8 的 matDatepicker 中使用带有 *ngIf 指令的按钮答案

【问题标题】：Use button with *ngIf Directive within matDatepicker in Angular 8在 Angular 8 的 matDatepicker 中使用带有 *ngIf 指令的按钮
【发布时间】：2020-03-09 14:03:23
【问题描述】：

我试图在每次 Datepicker 重视删除按钮显示以清除 matDatepicker 的值时，以这种方式在特定条件下显示 matDatepicker 中的删除按钮，并且它在使用 *ngIf 指令之前一直有效，当我使用 *ngIf 我在 datePicker 中看不到任何按钮元素。请知道的人帮帮我。

HTML

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
           <mat-form-field class="matfield full-width">
                <input matInput formControlName="dateTo" [matDatepicker]="pickerTo" placeholder="To Date"
                                (dateChange)="setDate('dateTo', $event)"/>
                       <button *ngIf="formGroup.value.dateTo" mat-button mat-icon-button matSuffix 
                                (click)="resetDateTo()">
                                <mat-icon [inline]="true">close</mat-icon>
                       </button>

                    <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
                    <mat-datepicker #pickerTo disabled="false"></mat-datepicker>
            </mat-form-field>
</div>

    // TicketFilterFormValues interface
    formGroup = new FormGroup({
        ticketNo: new FormControl(),
        serialNo: new FormControl(),
        branchCode: new FormControl(),
        ticketStatus: new FormControl(),
        dateFrom: new FormControl({ value: '', disabled: true }),
        dateTo: new FormControl({ value: '', disabled: true }),
        state: new FormControl(),
        city: new FormControl(),
        description: new FormControl(),
    });

resetDateFrom() {
        this.formGroup.patchValue({
            dateFrom: '',
        });
    }

    resetDateTo() {
        this.formGroup.patchValue({
            dateTo: ''
        });
    }

【问题讨论】：

当你禁用了 formControl 时，这不在 form.value 中，你需要使用 getRawValue() angular.io/api/forms/FormGroup#getrawvalue: <button *ngIf="formGroup.getRawValue().dateTo"...>: 注意：如果它被禁用，请确保 mat-datepicker 是禁用：[disabled]="formGroup.get('DateTo').disabled"
我的问题解决了，感谢您的描述和建议。
@Eliseo 添加您的答案，因为这有助于解决 OP 的问题。

标签： angular

【解决方案1】：

根据@Eliseo 的回答，它现在可以通过这种方法工作。

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                    <mat-form-field class="matfield full-width">
                        <input matInput formControlName="dateFrom" [matDatepicker]="pickerFrom"
                            placeholder="fromDate" (dateChange)="setDate('dateFrom', $event)" />
                        <button *ngIf="formGroup.getRawValue().dateFrom" mat-button mat-icon-button matSuffix
                            (click)="resetDateFrom()">
                            <mat-icon [inline]="true">close</mat-icon>
                        </button>

                        <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
                      <mat-datepicker #pickerFrom disabled="false"></mat-datepicker>
                  </mat-form-field>
             </div>

【讨论】：