enter image description hereIn this code snippet, there is a date input field along with a Permanent button. The scenario is that when the Permanent button is clicked, it should display "Permanent" in the input UI (nativeElements value), but the value being sent to the backend is a date 10 years later than the current date. Below is the code snippet:
<ng-container matColumnDef="endsOn">
<mat-header-cell class="m-1" style="max-width: 15%;" *matHeaderCellDef>
Ends On
</mat-header-cell>
<mat-cell class="m-1" *matCellDef="let element; let i=index">
<mat-form-field appearance="outline">
<input #dateInput placeholder="Select Date" matInput [matDatepicker]="picker" [value]="" [formControl]="element.get('END_TIME')" [min]="element.get('START_TIME').value" [max]="moment(element.get('START_TIME').value).add(10,'years').toDate()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker>
<mat-datepicker-actions>
<div class="datepicker-footer" #datepickerFooter>
<div class="slider-date__button mt-3">
<a mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a>
</div>
</div>
<!-- <button mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></button> -->
</mat-datepicker-actions>
</mat-datepicker>
</mat-form-field>
</mat-cell>
</ng-container>
TS -
isPermanentClicked(permanent , index){
console.log(index);
this.dataSource[index].controls['PERMANENT'] = true;
this.dataSource[index].controls['END_TIME'].setValue(permanent);
this.dateInput.nativeElement.value = "Permanent"; // only setting for 1st element, I need it to be index specific
console.log(this.dateInput.nativeElement.value , this.dataSource[index].controls['END_TIME'] );
this.datepicker.close(); // this is just closing for 1st element and not for others i'e not reachable
}
The issue mentioned in the second row is that the native element value is not being set to "Permanent."