响应式表单 - 迭代以从 JSON 加载表单数据，在数据中一起时无法捕获第二个日期

Question

在 Angular 2 个项目（版本 4.x）中，我大量使用 Reactive Forms 来创建和编辑数据。

从数据库中获取对象时，我获取了它的所有键（通过 UnderscoreJS），然后为每个键遍历对象并使用 patchValue 将数据加载到表单中。

我同时使用 Underscore.js 和 Moment.js，所以它们被导入到组件中：

import * as _ from 'underscore';
import * as moment from 'moment';

iterator和patch函数如下：

在迭代器中，我使用正则表达式查找与来自数据库的日期格式相匹配的值 - 这些值以字符串形式出现，而不是日期，并且始终采用 'yyyy-mm-dd' 格式。在组件中，我使用 ng-bootstrap 日历选择器，所以我需要捕获日期，将它们转换为 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)
      }
  }

一切正常，所以我可以通过将 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]);

注意：数据库中的对象总是出现在一个数组中，这就是为什么我要从数组中提取第一个对象。

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

所以上面的工作正常，但下面跳过 pickup_date:

var fetchedData = [{
      "purchased_date": "2017-09-16",
      "pickup_date": "2017-09-14"
      "purchase_description": "Some description",
      "purchase_reason": "Some Reason",
}]

我不知道为什么数据中相邻的第二个日期会失败，但我想确保无论获取数据的顺序如何，所有日期都将得到正确处理。

更新：以下是 console.log 中的一些片段：

第一个工作示例是这样注销的：

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 应用程序中的反应形式，并且提供的代码在非常特殊的情况下产生了错误的输出。不清楚正则表达式是否是问题所在，因此与实际正则表达式解决方案类似的解决方案甚至不在我的考虑范围之内。

Answer 1

在

查看类似问题的答案

基本上，当用 /g 标志指定时，正则表达式会在调用之间保存其状态，并记住它应该尝试找到下一个匹配项的字符串中的索引。您可以删除它，或者确保在使用它之前重新创建正则表达式（删除 /g 似乎是最直接的解决方案）

响应式表单 - 迭代以从 JSON 加载表单数据，在数据中一起时无法捕获第二个日期

Reactive Forms - iterate to load form data from JSON, fails to catch second date when together in data

forms

angular

typescript

reactive