如何在Angular Formly Material日期选择器选年后关闭组件

要在选择年份后关闭日期选择器，你可以通过以下几种方式获取日期选择器实例并调用关闭方法：

方法1：自定义模板+DOM查询 #

给日期选择器字段添加自定义模板，通过DOM查询获取实例并关闭：

fieldsOfMyForm: FormlyFieldConfig[] = [
  {
    key: 'form',
    type: 'repeat',
    templateOptions: {
      addText: 'my form',
    },
    fieldArray: { 
      fieldGroup: [ 
        {
          key: 'myyear',
          type: 'datepicker',
          template: `
            <formly-datepicker [field]="field" [formControl]="formControl"></formly-datepicker>
          `,
          templateOptions: {  
            datepickerOptions: { 
              yearSelected: ((field: any) => { 
                // 查询当前字段对应的日期选择器弹窗元素
                const datePickerPopup = field.templateRef.nativeElement.closest('.ngb-dp-popup');
                if (datePickerPopup) {
                  // 触发关闭逻辑，不同UI库可能有差异，这里以ng-bootstrap为例
                  const datePicker = datePickerPopup.querySelector('ngb-datepicker');
                  if (datePicker) {
                    datePicker.close();
                  }
                }
              })
            }
          }
        }
      ] 
    }
  }
];

方法2：通过字段钩子存储实例 #

利用Formly的onInit钩子提前获取日期选择器实例，在回调中直接调用关闭：

fieldsOfMyForm: FormlyFieldConfig[] = [
  {
    key: 'form',
    type: 'repeat',
    templateOptions: {
      addText: 'my form',
    },
    fieldArray: { 
      fieldGroup: [ 
        {
          key: 'myyear',
          type: 'datepicker',
          hooks: {
            onInit: (field) => {
              // 将日期选择器实例挂载到字段自定义属性上
              const datePicker = field.templateRef.nativeElement.querySelector('ngb-datepicker');
              if (datePicker) {
                field['datePicker'] = datePicker;
              }
            }
          },
          templateOptions: {  
            datepickerOptions: { 
              yearSelected: ((field: any) => { 
                if (field['datePicker']) {
                  field['datePicker'].close();
                }
              })
            }
          }
        }
      ] 
    }
  }
];

方法3：依赖注入获取实例（适用于ng-bootstrap） #

如果使用ng-bootstrap的日期选择器，可通过注入器直接获取当前实例：

import { Injector } from '@angular/core';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

// 组件类中注入Injector
constructor(private injector: Injector) {}

fieldsOfMyForm: FormlyFieldConfig[] = [
  {
    key: 'form',
    type: 'repeat',
    templateOptions: {
      addText: 'my form',
    },
    fieldArray: { 
      fieldGroup: [ 
        {
          key: 'myyear',
          type: 'datepicker',
          templateOptions: {  
            datepickerOptions: { 
              yearSelected: (() => { 
                const datePicker = this.injector.get(NgbDatepicker, null);
                if (datePicker) {
                  datePicker.close();
                }
              })
            }
          }
        }
      ] 
    }
  }
];

注意：如果使用的是Angular Material等其他UI库的日期选择器，需要调整实例获取逻辑，比如针对MatDatepicker，可通过ViewChild获取实例后调用close()方法。

内容的提问来源于stack exchange，提问作者Christoph Glaß