Angular 4：验证模型（不是表单）？

Question

我正在构建一个Angular 4移动应用程序（使用Ionic 2）。共享服务包含Visit对象，用户可以编辑该对象。该应用程序的主页面如下所示：

* Section 1: Customer Details (Complete)
* Section 2: Property Info (Incomplete)
* Section 3: Audit Results (Incomplete)

[Submit Visit]

点按每个部分会将用户带到一个单独的页面，在那里他们可以编辑Visit的该部分。 用户可以保存每个部分，即使它们无效或不完整。在主页面上，每个部分都会更改为＆＃34;（不完整）＆＃34;到＆＃34;（完成）＆＃34;当该部分中的所有必需信息都存在且有效时。当所有部分都有效时，＆＃34;提交访问＆＃34;按钮变为启用状态。

这是我想要完成的事情：

• 在版块页面上，我希望像往常一样显示表单验证消息（使用FormGroup），这样用户就可以轻松查看哪些字段仍需要注意。

• 这里的事情变得棘手：在主页上，我需要一些方法来测试Visit对象的每个部分的有效性。但FormGroup验证表单，而Visit对象（显然）不是表单。因此，我不确定如何重复使用FormGroups来直接验证Visit。 （我猜这不是一个好主意，甚至可能都不可能。）

我可以两次实施我的验证：作为一组FormGroups（用于验证每个部分的表单），以及作为自定义VisitValidatorService（用于验证） Visit对象直接）。但是，这显然不是理想的 - 我会复制代码，并且要保持两组验证同步，这是非常繁琐的。

我曾想过的想法：

1. 当用户保存每个部分时，在isSection1Valid = true对象上设置一个标志（例如，Visit）。这对我来说不起作用，因为当Visit首次加载到应用程序中时（通过JSON API），某些部分可能已经有效。因此，我仍然需要某种方法来检查每个部分的有效性，而不涉及实际的表格。

或的

1. 忘记完全使用FormGroup。构建我的VisitValidatorService，以便它可以验证原始Visit对象和表单模型。最后，连接我的节控制器，以便在表单控件发生更改时调用此服务，并将任何返回的错误存储在公共errors对象中，然后可以在模板中显示。

   这似乎可行，但......复杂。

有更好的方法吗？或者我正在尝试做一些Angular 4不能轻易处理的事情？

Answer 1

如果您不想两次进行验证工作，那么一个选项可以是各个表单将为您执行此操作。 您的访问对象由三个不同的对象组成，这些对象都可以具有附加属性＆＃34; isValid＆＃34;。

每次发布​​表单（表示表单有效）时，都会将属性isValid更新为True。 然后你的主页面可以有自己的isValid标志，这是其他三个标志的产物。 为了使其正常工作，您可以从服务器获取最新的访问对象以解决整体状态的新状态。

或者假设每次成功POST后，对于Visit对象的每个子元素，isValid都为真。