2017-10-05 47 views
1

在角2个项目(4.x版),我大量使用活性形式,既可以创建数据并对其进行编辑。当从数据库中获取一个对象时,我得到它的所有键(通过UnderscoreJS),然后遍历每个键的对象并使用patchValue将数据加载到表单中。活性形式 - 迭代从JSON加载表单数据,未能赶上第二次约会的时候一起在数据

我同时使用Underscore.js和Moment.js,所以他们导入到组件:

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

迭代器和修补功能如下:

在迭代器,我使用正则表达式来查找匹配的日期格式的数据库会,价值观 - 这些都为字符串,而不是日期,并始终在格式“YYYY-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) 
     } 
    } 

这一切工作,这样我就可以通过指定一个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]); 

注:从数据库中的对象总是在一个阵列,这就是为什么我拔的第一个对象关阵列。

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

因此上述工作正常,但以下跳过pickup_date:

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

我不知道为什么第二次约会时,相邻的数据会失败,但我想,以确保不管对提取的数据进行排序,所有的日期将被正确处理。

更新:下面是从控制台的一些片断。日志:

第一,工作示例注销这样的:

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应用程序中的反应形式中,并且代码提供的是一个非常具体的情况下产生不正确的输出目前尚不清楚正则表达式是否是问题,所以类似于实际正则表达式解决方案的解决方案甚至不在我的意料之中。

+0

您是否可以包含工作案例的所有'console.log'结果以及问题案例? –

+0

[为什么使用全局标志的RegExp会给出错误的结果?](https://stackoverflow.com/questions/1520800/why-does-a-regexp-with-global-flag-give-wrong-results) –

回答

1

退房回答类似的问题在https://stackoverflow.com/a/2851339/235648

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

相关问题