How to check which mat-icon was pressed?

k0uva 0
Viewed 18

I've added a clear button (mat-icon x sign) after a input field is populated via the datepicker. The problem is that I have two input fields (one is offer validity date and the other estimated delivery date) and I want to check which input mat-icon is pressed so that it clears only the values of that specific field.

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);
  }
angular
1 Answers

You can pass all the arguments to your function. So, e.g. you can use

<mat-icon .. (click)="resetDate('estimatedDeliveryDate')">
//and
<mat-icon .. (click)="resetDate('offerValidity')">

Your function like

  resetDate(controlName:string) {
    this.priceCalculationFormGroup.get(controlName).setValue(null);
  }

Remember that we can pass all the arguments we want to the function

Also, in this "simple case"(*) you can put the code in the own .html

<mat-icon .. (click)="priceCalculationFormGroup.get('estimatedDeliveryDate').setValue(null)">
//and
<mat-icon .. (click)="priceCalculationFormGroup.get('offerValidity').setValue(null)">

(*)As "simple case" means that it's not a complex instruction and is "intimate relationated" with the .html

Eliseo0
Related