如何判断点击了哪个mat-icon以清除对应日期输入框的值？

问题说明 #

我为两个Angular Material日期输入框（报价有效期、预计交付日期）添加了mat-icon清除按钮，但当前点击任意一个清除按钮都会同时清空两个输入框的值，需要实现点击对应按钮仅清空所属输入框的内容。

原代码 #

HTML

<mat-form-field fxFlex="45%" appearance="outline">
    <mat-label>{{ 'sales-module.offer-contract.price-calculation.offer.valid.until.label' | ppTranslate }}</mat-label>
    <input class="offer-validity-input" readonly formControlName="offerValidity" [min]="currentDate" matInput
                                 [matDatepicker]="offerValidityPicker" ef-feature-id="sm.offer-contract-flow.price-calculation-hr.offer-validity">
    <mat-icon matSuffix class="reset-date" *ngIf="this.dialogData.salesDocument.endDate"
                                    matDatepickerToggleIcon (click)="resetDate()">close
    </mat-icon>
    <mat-datepicker-toggle matSuffix [for]="offerValidityPicker"></mat-datepicker-toggle>
    <mat-datepicker [disabled]="false" #offerValidityPicker></mat-datepicker>
    </mat-form-field>

    <mat-form-field fxFlexOffset="10%" fxFlex="45%" appearance="outline">
    <mat-label>{{ 'sales-module.offer-contract.price-calculation.estimated.delivery.date.label' | ppTranslate }}</mat-label>
    <input class="offer-estimated-delivery" readonly formControlName="estimatedDeliveryDate" [min]="currentDate" matInput
                                 [matDatepicker]="deliveryDatePicker" ef-feature-id="sm.offer-contract-flow.price-calculation-hr.estimated-delivery-date">
    <mat-icon matSuffix class="reset-date" *ngIf="this.dialogData.salesDocument.dateHandover"
                                    matDatepickerToggleIcon (click)="resetDate()">close
    </mat-icon>
    <mat-datepicker-toggle matSuffix [for]="deliveryDatePicker"></mat-datepicker-toggle>
                          <mat-datepicker [disabled]="false" #deliveryDatePicker></mat-datepicker>
</mat-form-field>

TS

resetDate() {
    this.priceCalculationFormGroup.controls.estimatedDeliveryDate.setValue(null);
    this.priceCalculationFormGroup.controls.offerValidity.setValue(null);
}

修改方案 #

1. 更新HTML模板 #

给每个清除按钮的click事件传入对应输入框的formControlName作为参数，明确指定要清空的控件：

<mat-form-field fxFlex="45%" appearance="outline">
    <mat-label>{{ 'sales-module.offer-contract.price-calculation.offer.valid.until.label' | ppTranslate }}</mat-label>
    <input class="offer-validity-input" readonly formControlName="offerValidity" [min]="currentDate" matInput
                                 [matDatepicker]="offerValidityPicker" ef-feature-id="sm.offer-contract-flow.price-calculation-hr.offer-validity">
    <mat-icon matSuffix class="reset-date" *ngIf="this.dialogData.salesDocument.endDate"
                                    matDatepickerToggleIcon (click)="resetDate('offerValidity')">close
    </mat-icon>
    <mat-datepicker-toggle matSuffix [for]="offerValidityPicker"></mat-datepicker-toggle>
    <mat-datepicker [disabled]="false" #offerValidityPicker></mat-datepicker>
</mat-form-field>

<mat-form-field fxFlexOffset="10%" fxFlex="45%" appearance="outline">
    <mat-label>{{ 'sales-module.offer-contract.price-calculation.estimated.delivery.date.label' | ppTranslate }}</mat-label>
    <input class="offer-estimated-delivery" readonly formControlName="estimatedDeliveryDate" [min]="currentDate" matInput
                                 [matDatepicker]="deliveryDatePicker" ef-feature-id="sm.offer-contract-flow.price-calculation-hr.estimated-delivery-date">
    <mat-icon matSuffix class="reset-date" *ngIf="this.dialogData.salesDocument.dateHandover"
                                    matDatepickerToggleIcon (click)="resetDate('estimatedDeliveryDate')">close
    </mat-icon>
    <mat-datepicker-toggle matSuffix [for]="deliveryDatePicker"></mat-datepicker-toggle>
    <mat-datepicker [disabled]="false" #deliveryDatePicker></mat-datepicker>
</mat-form-field>

2. 修改TS方法 #

让resetDate方法接收控件名称参数，仅清空指定输入框的值：

resetDate(controlName: string) {
    this.priceCalculationFormGroup.controls[controlName].setValue(null);
}

修改完成后，点击每个输入框对应的清除按钮，只会清空当前输入框的值，不会影响另一个输入框的内容。

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