在mat-datepicker中实现变量绑定

Question

描述

我正在尝试将 MatDatePicker 包装在一个名为 MyDatePicker 的自定义组件中，以便我可以在 html 中使用它，如下所示。

问题

dateVariable 始终未定义，似乎我在下面实现的双向绑定不起作用。一旦用户从选择器中选择了一个新日期，就会调用 setter。但是，新值未绑定到 dateVariable.

问题

如何在自定义日期选择器和变量之间实现双向绑定？
如何实现单向绑定（从日期选择器 -> 变量）？

实施

HTML 文件:

<my-datepicker [(selectedDate)]="dateVariable" placeholder="some text"></my-datepicker>

<button (click)="btnClick()">Show Selected Date</button>

TS 文件：

//...

    dateVariable: string;       

    btnClick() {

      console.log('selected date:', this.dateVariable);
   }
//...

MyDatepicker.component.ts

export class MyDatepickerComponent {

    dateValue: string;
    @Input() placeholder: string;

    @Output() dateChange: EventEmitter<string> = new EventEmitter<string>();

    @Input()
    get selectedDate() {
        console.log('getter');
        return this.dateValue;
    }
    set selectedDate(val) {
        console.log('setter');
        this.dateValue = val;
        this.dateChange.emit(this.dateValue);
    }

    pickerEvent(event: MatDatepickerInputEvent<Date>) {
        this.selectedDate = event.value.toISOString();
    }
}

MyDatepicker.component.html:

<mat-form-field>
        <input matInput [matDatepicker]='pickerDate' placeholder='{{placeholder}}' (dateInput)="pickerEvent($event)">
        <mat-datepicker-toggle matSuffix [for]='pickerDate'></mat-datepicker-toggle>
        <mat-datepicker #pickerDate></mat-datepicker>
</mat-form-field>

Answer 1

要使双向绑定起作用，Output() 的名称必须与 Input() 的名称相同，并带有后缀 Change。所以改变你的代码：

@Output() selectedDateChange: EventEmitter<string> = new EventEmitter<string>();

与setter相同：

set selectedDate(val) {
    console.log('setter');
    this.dateValue = val;
    this.selectedDateChange.emit(this.dateValue);
}

Answer 2

如前所述：对于双向绑定 [()]（香蕉盒语法）我们必须写一个 @Input 和相应的 @Output 像：

@Input() selectedDate: Date;

@Output() selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();

这可以与输入绑定和单独的输出绑定一起使用：

<my-datepicker [selectedDate]="dateVariable" (selectedDateChange)="dateVariable = $event" placeholder="some text"></my-datepicker>

或者使用 Angular 提供的一些语法糖和现成的语法：

<my-datepicker [(selectedDate)]="dateVariable" placeholder="some text"></my-datepicker>

旁注：

1) 我认为您还需要将 matInput 与实际的 Date 值绑定

<mat-form-field>
        <input matInput [matDatepicker]='pickerDate' [value]="selectedDate" placeholder='{{placeholder}}' (dateInput)="pickerEvent($event)">
        <mat-datepicker-toggle matSuffix [for]='pickerDate'></mat-datepicker-toggle>
        <mat-datepicker #pickerDate></mat-datepicker>
</mat-form-field>

2) 如果你想在 Angular 表单中使用 my-datepicker 你需要实现 ControlValueAccessor 接口

3) 如果您编写此自定义组件的唯一原因是您希望使用 ISO 日期字符串作为输入，我建议在 API / 服务级别而不是在组件中处理此转换.

在mat-datepicker中实现变量绑定

Implement variable binding in mat-datepicker

angular-material

angular

mat-datepicker