Ionic2 - 使用变量设置默认字段值不起作用

Question

我的一个组件中有一个带有日期选择器的表单。此组件的构造函数如下所示。

constructor(public navCtrl: NavController, private formBuilder: FormBuilder,
private profileService: ProfileService) {
this.formIsValid = true;
let dobObj = JSON.parse(localStorage.getItem('current_profile')).stripeAccount.legal_entity.dob;
let dob = (dobObj.year && dobObj.month && dobObj.day) ? dobObj.year + "-" + dobObj.month + "-" + dobObj.day : '';
console.log(dob); // This prints "1999-12-31"
this.dobForm = formBuilder.group({
dob: [dob.toString(), Validators.required]
});
}

由于我正在使用dob.toString()设置日期选择器的默认值，我收到了以下错误消息。

WARN: Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

我控制台在formBuilder之前记录了值，并且日期按预期打印出来。字符串似乎在用于设置formBuilder中的默认值之前发生了某种更改。如果我在formBuilder中硬编码字符串"1999-12-31"而不是使用变量，它就可以工作了。我甚至检查了一下，以确保"dob==='1999-12-31'"是真的。

为什么硬编码字符串可以设置默认值，而具有完全相同值的变量却不能工作？

编辑：

这一定是日期选择器的一个错误。如果我输入"1999-12-31"作为硬编码字符串，它会按预期工作。如果我输入"1997-1-1"或"1997-12-3"，它将失败。它接受一些有效日期，而不接受其他日期。

编辑2:

看看这个：

constructor(public navCtrl: NavController, private formBuilder: FormBuilder,
private profileService: ProfileService, private loadingService: LoadingService) {
this.formIsValid = true;
//TODO: What??? Why is this happening?
console.log(new Date("1997-1-1")); // null
console.log(new Date("1999-12-31")); // "1999-12-31T00:00:00.000Z"
console.log(new Date("2010-11-7")); // null
console.log(new Date("1992-4-21")); // null
console.log(new Date("1842-2-27")); // null
console.log(new Date("2000-8-20")); // null
this.dobForm = formBuilder.group({
dob: ['', Validators.required]
});
}

为什么这么多字符串无法解析为日期？"1999-12-31"和其他的有什么区别？

Answer 1

出现此问题的原因是您的日期选择器将null作为值。在日期选择器的代码中，它们没有对null值进行验证。

参考：源代码来自https://github.com/driftyco/ionic/blob/master/src/util/datetime-util.ts

export function updateDate(existingData: DateTimeData, newData: any) {
if (isPresent(newData) && newData !== '') {
if (isString(newData)) {
// new date is a string, and hopefully in the ISO format
// convert it to our DateTimeData if a valid ISO
newData = parseDate(newData);
if (newData) {
// successfully parsed the ISO string to our DateTimeData
Object.assign(existingData, newData);
return;
}
} else if ((isPresent(newData.year) || isPresent(newData.hour) || isPresent(newData.month) || isPresent(newData.day) || isPresent(newData.minute) || isPresent(newData.second))) {
// newData is from of a datetime picker's selected values
// update the existing DateTimeData data with the new values
// do some magic for 12-hour values
if (isPresent(newData.ampm) && isPresent(newData.hour)) {
if (newData.ampm.value === 'pm') {
newData.hour.value = (newData.hour.value === 12 ? 12 : newData.hour.value + 12);
} else {
newData.hour.value = (newData.hour.value === 12 ? 0 : newData.hour.value);
}
}
// merge new values from the picker's selection
// to the existing DateTimeData values
for (var k in newData) {
(<any>existingData)[k] = newData[k].value;
}
return;
}
// eww, invalid data
console.warn(`Error parsing date: "${newData}". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime`);
} else {
// blank data, clear everything out
for (var k in existingData) {
delete (<any>existingData)[k];
}
}

}

Answer 2

如果在个位数日期前添加"0"，则可以创建日期，如下所示：

console.log(new Date("2000-8-20"));  // null
console.log(new Date("2000-08-20")); // Sun Aug 20 2000 10:00:00 GMT+1000 (AEST)

为了设置日期选择器的默认值，(正如@briosheje所指出的)这对我来说很有用：

this.fromDate = new Date().toISOString();

如果没有这一点，我会得到与问题中描述的相同的解析错误。