我可以在Form数据和表单控件之间创建某种“中介”吗?

问题描述 投票:0回答:1

我有一个具有自定义属性类型TimeSpan的模型。我想在[form]中使用kendo-timepicker编辑它,但是需要一个Date对象。

有没有办法我可以创建一个指令来拦截控件和底层ngControl之间,以便我可以在TimeSpanDate之间进行转换?

我宁愿不必创建一个看起来与模型相同但具有不同属性类型的新类。

angular angular-reactive-forms
1个回答
0
投票

我这样做的方法是在保存映射表单的地方添加一个额外的变量。所以像这样:

mappedForm={};
constructor(....){...}


ngOnInit() {
   this.myForm.valueChanges.subscribe(form => {
     form.property =  parseInt(form.property, null);
     this.mappedForm = form;
   })    
}

在这种情况下,我将字符串映射到数字,但您可以使用'as'关键字来映射更复杂的数据结构。另外,根据您的情况,您可以使用map并使用正确的值来观察,而不是像我一样订阅。另请注意,mappedForm只是表单值的快照,不包含其他属性。

编辑如果您想重新更新表格控件

如果要重置表单控件值,可能需要使用辅助布尔值,这样就不会陷入无限循环。

ngOnInit() {
let isFirst = false;
this.myForm.valueChanges.subscribe(form => {
  form.prop = parseInt(form.prop , null);//replace with you mapping
  if (isFirst) {
    this.myForm.patchValue(form);
    isFirst = !isFirst;
  } 
})
}
© www.soinside.com 2019 - 2024. All rights reserved.