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

Question

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

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

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

然后我想到我可以使用组件绑定(bind)来传递表单的模型，但这听起来工作量太大，或者有些脏东西。

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

伪代码示例:

<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>

Component-1 表单元素:

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

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

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

这允许您检查 $valid、$error 等...

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