Question

我正在建立一个很长的形式。有问题的表格有3个主要部分，出于维护原因，我想使用3个组件清理模板。

问题在于，当您更新组件的输入时，包含这些组件的表单模型不会更新，因此不会使用Angular＆＃34; native＆＃34;形式验证器。

我想到了＃34;分享＆＃34;使用服务从这些组件到父表单的数据，但这并没有给我验证器。

然后我认为我可以使用组件绑定来传递表单的模型，但这听起来像是太多的工作，或者是脏东西。

那么执行此操作的最佳做法是什么？

伪代码示例：

<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会为您提供包含子表单的表单对象（该属性将是您组件的ng-form中的名称）。

这样您就可以检查$valid，$error等...

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

创建包含组件的Angular表单的最佳方法是什么？

1 个答案: