Angular: 通过下拉菜单的选择设置日期字段

Question

假设我有一个下拉菜单，其中包含以下选项：“WORK”、“RELEASE”、“OPEN”和第二个字段，一个日历，最初是一个空字段。通过将下拉菜单设置为“发布”，它应该触发日历字段，将其设置为今天的日期。模板如下所示 (form.component.html):

<form [formGroup]="form">
    <div class="flex">
        <div class="col-3">
            <div class="flex flex-row align-items-center">
                <label class="col-6">Status</label>
                <p-dropdown
                    [options]="workStatus"
                    [showClear]="true"
                    formControlName="workingStatus"
                    class="col-6">
                </p-dropdown>
            </div>
            <div class="flex flex-row align-items-center">
                <label class="col-6">Date</label>
                <p-calendar formControlName="getWorkDate"
                            dateFormat="dd-mm-yyyy"
                            dataType="localdate"
                            appendTo="body"
                            class="col-6">
                </p-calendar>

为了获得今天的日期，我在 form.component.ts 中编写了以下函数：

selectTodaysDate(DateToday: number[]) {
    const todayDate = new Date().getDate();
    this.form.patchValue({getWorkDate: DateToday.find(today => today == todayDate)});
}

但我不知道如何触发下拉菜单。我该怎么做？

Answer 1

您可以使用 onchange 事件。请参阅 Events 部分下的 table。

<p-dropdown
    [options]="workStatus"
    [showClear]="true"
    formControlName="workingStatus"
    (onChange)="onDropdownChange($event.value)"
    class="col-6"
    >
</p-dropdown>

onDropdownChange(value) {
  if (value == 'RELEASE')
    this.form.controls["getWorkDate"].setValue(new Date());
}

Sample Demo on StackBlitz

旁注：

对于 <p-calendar>，日期格式应为 dd-mm-yy 而不是 dd-mm-yyyy。请参阅 DateFormat 部分。

Answer 2

您可以像这样将更改事件与下拉列表绑定，并根据您的响应使之成为可能。

示例

HTML :

<p-dropdown  
[options]="workStatus"
[showClear]="true"
formControlName="workingStatus"
class="col-6"  
(onChange)="onChange($event)">
</p-dropdown>

在 TS 文件中，您可以根据启用日历设置条件。

onChange(event) {
    console.log('event :' + event);
    console.log(event.value);
    if(event.value === "RELEASE"){
     this.selectTodaysDate(params); // Function call
   // or you can simply patch form value here like this
     const todayDate = new Date().getDate();
     this.form.patchValue({getWorkDate: DateToday.find(today => today == todayDate)});
   }
}

已经创建的函数。

selectTodaysDate(DateToday: number[]) {
        const todayDate = new Date().getDate();
        this.form.patchValue({getWorkDate: DateToday.find(today => today == todayDate)});
    }

Angular: 通过下拉菜单的选择设置日期字段

Angular: Setting a date field by dropdown menu's selection

typescript

primeng

angular

angular13