如何在 mat-datepicker 输入中设置显示一些字符串，但在后端它只是发送的日期

Question

enter image description here Here is my code - I have a date input along with one Permanent button(having multiple rows added so it should index specific), Scenerio is I click on Permanent button, it should show as Permanent in input UI(nativeElements value) but the value that is sending to backend is 10yrs later date. Here is my piece of code

<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
 }

Description in 2nd row native element value is not setting to permanent.

Answer 1

You need to take viewChildren since there are multiple date inputs, then use the same index and perform the actions.

export TestComponent implements OnInit {
// define the viewchildren like so
@ViewChildren('dateInput') dateInputs: QueryList<any>;
@ViewChildren('picker') datePickers: QueryList<any>;

isPermanentClicked(permanent , index, dateInput: any, datePicker: any){
    console.log(index);
    this.dataSource[index].controls['PERMANENT'] = true;
    this.dataSource[index].controls['END_TIME'].setValue(permanent);
    this.dateInput.value = "Permanent"; // only setting for 1st element, I need it to be index specific
    console.log(this.dateInput.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
 }
}

html

<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, dateInput, picker)"><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>
            </mat-datepicker-actions>
        </mat-datepicker>

    </mat-form-field>
</mat-cell>
</ng-container>