Angular 10如何从绑定PrimeNG p-calendar的formControl获取Date对象及ISO字符串

核心结论 #

你要拿Date对象的需求直接通过控件取值就能实现，操作逻辑如下：

1. 先修正拼写错误
   你模板里的<p-calendar>绑定的formControlName写的是data_cadstro，和表单定义的字段名data_cadastro少了一个字母a，这个错误会导致你取值时拿到undefined，先把模板里的绑定改成formControlName="data_cadastro"。

2. 直接取值即可实现需求
   PrimeNG 的<p-calendar>组件默认配置下返回的就是原生JS Date对象，你直接访问控件的value属性拿到的就是你需要的Date对象，要转ISO字符串的话直接调用Date自带的toISOString()方法即可。
   正确代码示例：

// 推荐用get方法取控件，兼容嵌套表单场景
const dataCadastroControl = this.formGroup.get('data_cadastro');

if (dataCadastroControl?.value) {
  // 直接拿到原生Date对象，满足核心需求
  const targetDate: Date = dataCadastroControl.value;
  // 需要ISO字符串的话调用方法转换
  const isoDateStr = targetDate.toISOString();
  
  console.log('日期对象：', targetDate);
  console.log('ISO格式字符串：', isoDateStr);
}

特殊情况说明 #

如果你主动给<p-calendar>配置了[dataType]="string"属性，那么控件返回的值会是日期字符串，这时候你需要手动转成Date对象即可：

const dateStr = dataCadastroControl.value;
const targetDate = new Date(dateStr);

内容的提问来源于stack exchange，提问作者Diego Alves