Forms 反应式表单-迭代从JSON加载表单数据,在数据集中时无法捕获第二个日期

Forms 反应式表单-迭代从JSON加载表单数据,在数据集中时无法捕获第二个日期,forms,angular,typescript,reactive,Forms,Angular,Typescript,Reactive,在Angular 2项目(版本4.x)中,我大量使用反应式表单来创建数据和编辑数据 从数据库中获取对象时,我获取其所有键(通过下划线),然后针对每个键迭代对象,并使用patchValue将数据加载到表单中 updatedFormWithJSONData(inputObject: any) { var _keys = _.keys(inputObject); var _re = /\d{4}[-]\d{1,2}[-]\d{1,2}/g; //RexEx to match

在Angular 2项目(版本4.x)中,我大量使用反应式表单来创建数据和编辑数据

从数据库中获取对象时,我获取其所有键(通过下划线),然后针对每个键迭代对象,并使用patchValue将数据加载到表单中

  updatedFormWithJSONData(inputObject: any) {
      var _keys = _.keys(inputObject);
      var _re = /\d{4}[-]\d{1,2}[-]\d{1,2}/g; //RexEx to match 2017-09-05 (or 2017-9-5) - yyyy-mm-dd format
          for (let key of _keys) {
              console.log("item.key", key);
              console.log("item.value", inputObject[key]);
              if (_re.test(inputObject[key])) {
                  console.log("Is Date", inputObject[key]);
                  var dateValue = moment(inputObject[key]);  
                  var NgbDateStruct = { day: dateValue.date(), month: dateValue.month() + 1, year: dateValue.year()};               
                  console.log("Date Value", NgbDateStruct);
                  this.updateSelected(key, NgbDateStruct);
                } else {
                  this.updateSelected(key, inputObject[key]);
              }
          }
  }
  updateSelected(key, value) {
      if (key && value && this.form.contains(key)) {
          this.form.controls[key].patchValue(value)
      }
  }
我同时使用下划线.js和Moment.js,因此它们被导入到组件中:

import * as _ from 'underscore';
import * as moment from 'moment';
迭代器和面片函数如下所示:

在迭代器中,我使用正则表达式查找与来自数据库的日期格式相匹配的值——这些值是字符串,而不是日期,并且始终采用“yyy-mm-dd”格式。在组件中,我使用ng引导日历选择器,因此我需要捕获日期,将其转换为NgbDateStruct对象格式,然后再将其修补到表单中

  updatedFormWithJSONData(inputObject: any) {
      var _keys = _.keys(inputObject);
      var _re = /\d{4}[-]\d{1,2}[-]\d{1,2}/g; //RexEx to match 2017-09-05 (or 2017-9-5) - yyyy-mm-dd format
          for (let key of _keys) {
              console.log("item.key", key);
              console.log("item.value", inputObject[key]);
              if (_re.test(inputObject[key])) {
                  console.log("Is Date", inputObject[key]);
                  var dateValue = moment(inputObject[key]);  
                  var NgbDateStruct = { day: dateValue.date(), month: dateValue.month() + 1, year: dateValue.year()};               
                  console.log("Date Value", NgbDateStruct);
                  this.updateSelected(key, NgbDateStruct);
                } else {
                  this.updateSelected(key, inputObject[key]);
              }
          }
  }
  updateSelected(key, value) {
      if (key && value && this.form.contains(key)) {
          this.form.controls[key].patchValue(value)
      }
  }
update函数测试以确保键和值都有值,并且表单包含键,然后对表单进行修补

  updatedFormWithJSONData(inputObject: any) {
      var _keys = _.keys(inputObject);
      var _re = /\d{4}[-]\d{1,2}[-]\d{1,2}/g; //RexEx to match 2017-09-05 (or 2017-9-5) - yyyy-mm-dd format
          for (let key of _keys) {
              console.log("item.key", key);
              console.log("item.value", inputObject[key]);
              if (_re.test(inputObject[key])) {
                  console.log("Is Date", inputObject[key]);
                  var dateValue = moment(inputObject[key]);  
                  var NgbDateStruct = { day: dateValue.date(), month: dateValue.month() + 1, year: dateValue.year()};               
                  console.log("Date Value", NgbDateStruct);
                  this.updateSelected(key, NgbDateStruct);
                } else {
                  this.updateSelected(key, inputObject[key]);
              }
          }
  }
  updateSelected(key, value) {
      if (key && value && this.form.contains(key)) {
          this.form.controls[key].patchValue(value)
      }
  }
这一切都是可行的,所以我可以通过将JSON块分配给变量,然后调用函数,传入变量和表单加载来测试这一点

var fetchedData = [{
      "purchased_date": "2017-09-16",
      "purchase_description": "Some description",
      "purchase_reason": "Some Reason",
      "pickup_date": "2017-09-14"
}]
我可以这样称呼它:

this.updatedFormWithJSONData(fetchedData[0]);
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason
item.key pickup_date
item.value 2017-09-14
Is Date 2017-09-14
Date Value {day: 14, month: 9, year: 2017}
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key pickup_date
item.value 2017-09-14
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason
注意:数据库中的对象总是以数组的形式出现,这就是为什么我要从数组中取出第一个对象

现在-问题是,只要两个日期键/值对之间的数据中有一个非日期键/值对,一切正常,但如果两个日期键/值对相邻,则第二个键/值对与正则表达式不匹配,并且不会被修补到表单中

  updatedFormWithJSONData(inputObject: any) {
      var _keys = _.keys(inputObject);
      var _re = /\d{4}[-]\d{1,2}[-]\d{1,2}/g; //RexEx to match 2017-09-05 (or 2017-9-5) - yyyy-mm-dd format
          for (let key of _keys) {
              console.log("item.key", key);
              console.log("item.value", inputObject[key]);
              if (_re.test(inputObject[key])) {
                  console.log("Is Date", inputObject[key]);
                  var dateValue = moment(inputObject[key]);  
                  var NgbDateStruct = { day: dateValue.date(), month: dateValue.month() + 1, year: dateValue.year()};               
                  console.log("Date Value", NgbDateStruct);
                  this.updateSelected(key, NgbDateStruct);
                } else {
                  this.updateSelected(key, inputObject[key]);
              }
          }
  }
  updateSelected(key, value) {
      if (key && value && this.form.contains(key)) {
          this.form.controls[key].patchValue(value)
      }
  }
因此,上面的操作很好,但以下操作跳过了取货日期:

var fetchedData = [{
      "purchased_date": "2017-09-16",
      "pickup_date": "2017-09-14"
      "purchase_description": "Some description",
      "purchase_reason": "Some Reason",
}]
我不知道为什么数据中相邻的第二个日期会失败,但我希望确保,无论提取数据的顺序如何,所有日期都会得到正确处理

更新:以下是控制台中的一些代码片段。日志:

第一个工作示例如下所示注销:

this.updatedFormWithJSONData(fetchedData[0]);
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason
item.key pickup_date
item.value 2017-09-14
Is Date 2017-09-14
Date Value {day: 14, month: 9, year: 2017}
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key pickup_date
item.value 2017-09-14
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason
第二个非工作示例如下所示注销:

this.updatedFormWithJSONData(fetchedData[0]);
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason
item.key pickup_date
item.value 2017-09-14
Is Date 2017-09-14
Date Value {day: 14, month: 9, year: 2017}
item.key purchased_date
item.value 2017-09-16
Is Date 2017-09-16
Date Value {day: 16, month: 9, year: 2017}
item.key pickup_date
item.value 2017-09-14
item.key purchase_description
item.value Some description
item.key purchase_reason
item.value Some Reason

后续:虽然问题最终出在正则表达式的参数上,但问题的目的是解决在JSON数据文件上迭代的问题,以便在Angular 2应用程序中将值加载到反应形式中,并且提供的代码在非常特殊的情况下产生了错误的输出。不清楚正则表达式是否是问题所在,因此与实际正则表达式解决方案类似的解决方案甚至不在我的关注范围内。


基本上,当使用
/g
标志指定正则表达式时,它会在调用之间保存其状态,并将索引存储到字符串中,以便尝试查找下一个匹配项。您可以删除它,或者确保在使用正则表达式之前重新创建正则表达式(删除
/g
似乎是最简单的解决方案)

您是否可以包括工作案例和问题案例的所有
控制台.log
结果?可能重复的