angular material datepicker未从laravel api响应中预填充值

3wabscal  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(381)

我在表单中有一个有Angular 的材质日期选择器字段。表单连接到用laravel构建的api端点。当我在“createbooking”视图中选择一个日期并将表单发布到端点时,一切正常,该日期正确地保存到数据库中。但是,当我加载表单并发出get请求并将响应绑定到“editbooking”视图中的表单时,该字段不会预先填充日期和时间。
这是我的日期选择器字段:

<mat-form-field>
    <input matInput [matDatepicker]="datePicker" placeholder="Booking date" [ngModel]="booking?.date" name="date" required>
    <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
    <mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>

以下是我的json响应:

{
    "id": 23,
    "consultant_id": 1669,
    "teacher_id": null,
    "school_id": 6,
    "date": "2018-11-26 00:00:00"
}

这是我的组件文件:

export class BookingEditComponent implements OnInit {
    public loading: boolean = false;
    public booking: any;
    public booking_id: number;

constructor(
    private bookingService: BookingService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
) { }

ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
        this.booking_id = +params['booking_id'];
        this.getBooking(this.booking_id);
    })
}

public getBooking(booking_id: number): void {
    this.bookingService
        .getBooking(booking_id)
        .subscribe(booking => this.booking = booking);
}

public updateBooking(form: any): void {
    var item = form.value;
    this.bookingService
        .updateBooking(this.booking_id, item)
        .subscribe();
}
h5qlskok

h5qlskok1#

<mat-form-field>
 <input matInput [matDatepicker]="datePicker" placeholder="Booking date" [ngModel]="booking?.date" name="date" required>
 <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
 <mat-datepicker #datePicker [startAt]="startDate"></mat-datepicker>
</mat-form-field>

文件.ts

startDate;

public getBooking(booking_id: number): void {
this.bookingService
    .getBooking(booking_id)
    .subscribe(booking => {
      this.booking = booking
      startDate = new Date(booking.date);
    };
}

发现于https://material.angular.io/components/datepicker/examples 在“datepicker开始日期”下

相关问题