angular - 显示、编辑和验证与使用响应式表单写入/读取模型不同的数据

Question

我的设置

我有一个value来自 db 作为number. 此值应始终是一个数字，除非是为了在input-element 中显示它并验证输入。只有在这些情况下，数字才必须是一个HEX值。

这是应该发生的事情：

1. value: 200来自服务。
2. ?value=200在路由器中用作参数。
3. value: 'c8'显示在input[type=text]视图中。
4. 用户将此值更改为fa
5. 这个验证器应该（如果可能的话）验证fa它是否是一个有效的 HEX 表达式。
6. 如果是，那么应该在模型中value = hex2Number('fa')导致，而仍然应该在-element 中进行编辑。value: 250fainput
7. value: 250之后应该再次在路由器中使用，并且应该回到服务器。

完全相同的用例适用于例如分钟：正在编辑的秒数和保存在数据库中的秒数。

我不需要- 方法的帮助hex2Number()；-)

我的问题

1. 这可能使用反应形式吗？
2. ...还是我必须改用模板驱动表单？
3. 是否有在 GUI 和其背后的模型中拥有不同数据的最佳实践？

提前致谢！

标签： angularformstypescriptarchitecture

Answer 1

1）是的，这是可能的。为此创建一个自定义ControlValueAccessor。

2）它与反应式和模板驱动的表单兼容。

3)ControlValueAccessor是最佳实践。