Используйте кнопку с директивой * ngIf внутри matDatepicker в Angular 8 - PullRequest
0 голосов
/ 09 марта 2020

Я пытаюсь показать кнопку удаления в matDatepicker для указанного условия c таким образом, каждый раз, когда Datepicker оценивает показ кнопки удаления, чтобы очистить значение 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>

TS

    // 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: ''
        });
    }

datepicker

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...