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

Question

在此处输入图像描述这是我的代码 - 我有一个日期输入和一个永久按钮（添加了多行，因此它应该索引特定），Scenerio 是我点击永久按钮，它应该在输入 UI 中显示为永久（nativeElements 值) 但发送到后端的值是 10 年后的日期。 这是我的一段代码

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

第二行原生元素值中的描述未设置为永久。

Answer 1

您需要使用viewChildren ，因为有多个日期输入，然后使用相同的索引并执行操作。

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>