创建包含组件的角度形状的最佳方法是什么？

Question

我正在构建一个非常长的表单。有问题的表单有3个主要部分，出于维护原因，我想使用3个组件来清理模板。

问题是，当您更新组件的输入时，包含这些组件的表单模型不会更新，因此不会使用Angular的“本机”表单验证器进行验证。

我想过使用服务将这些组件的数据“共享”到父表单，但这并没有给我提供验证器。

然后，我想我可以使用组件绑定来传递表单的模型，但这听起来太多了，或者说是很麻烦的事情。

那么，执行此操作的最佳实践是什么？

伪代码示例：

<form>
    <component-1/> <!-- how do I get data out of there, and into the form model -->
    <component-2/> <!-- how do I validate the inputs inside the components using angular -->
    <component-3/>
    <button type="submit">Submit</button>
</form>

Answer 1

好的。我对此做了一点实验，发现了这一点。

父窗体：

<form name="form" ng-submit="$ctrl.submit(form)>
    <component-1></component-1>
</form>

组件-1表单元素：

<fieldset ng-form="child-form">
    <input
        type="text"
        name="first-name"
        id="first-name"
        ng-model="$ctrl.sharedService.formData.name">
</fieldset>

除非您使用=绑定(这对于组件来说显然是不好的实践，因为它们应该是无状态的，或者如果您想要模仿Angular 2组件)，否则没有“本地”方法将模型从子组件“同步”到父组件。

也就是说，当您提交父表单时，Angular将为您提供包含子表单的form对象(该属性将是组件的ng-form中的名称)。

这使您可以检查$valid、$error等。

最后，保存或同步组件输入值，我们可以将表单输入值保存在共享服务对象上，该对象可用于编写$http调用以将值保存到后端。