Javascript 将表单传递给AngularJS组件进行验证

我正在将我的遗留代码库转移到AngularJS 1.5推出的新组件体系结构。在对较大的表单执行此操作时，我遇到了一个问题。传统上，我会附上如下表格验证：

<form name="myForm">
  <input type="text" name="input1" ng-model="vm.input1" required />
  <div ng-messages="myForm.input1.$error">
    <div ng-message="required">Please fill out this field.</div>
  </div>
  <!-- many more inputs -->
</form>

请填写这个字段。

当过渡到组件体系结构时，我必须显式地将表单传递给组件：

<form name="vm.myForm">
  <my-awesome-input-component model="vm.input1" form="vm.myForm"><my-awesome-input-component>
  <!-- many more inputs -->
</form>

<ng-form name="myComponentForm">
    <input type="number" ng-model="$ctrl.myModel" name="myField"/>
    <span ng-show="myComponentForm.myField.$invalid">There's an error</span>
</ng-form>

我希望避免我的表单污染

vm

。是否有更好的方法来实现表单所需的组件体系结构？

更新-将表单名称更改为表单引用，因为我们传递的是实际的表单引用，而不仅仅是表单名称，这一点并不明确。这可以被称为任何你想要的，只是清楚它实际上是什么。

正如Iain Reid的评论所说，您不需要为此使用vm。您只需将表单命名为任何您想要的名称，然后将该名称传递给您的组件，因此它将如下所示：

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
   <my-input form-reference="myForm"></my-input>
   <button type="submit">Some button</button>
</form>

最后，当我在表单中使用组件时：

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
   <my-input form-reference="myForm" my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input>
   <button type="submit">Some button</button>
</form>

官方文件：

---

我希望所有这些都能帮助一些人：-）

这是另一种可能有用的方法。使用

require

将父

表单

包含在

$ctrl

中：

angular.module("myApp")
    .component("myInput",{
        templateUrl:'path/to/template.html'
        bindings:{
            myInputModel:'<',
            onUpdate:'&'
        },
        controller: MyInputController,
        require: {
            form: '^form'
        }
}

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
    <my-input my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input>
    <button type="submit">Some button</button>
</form>

我猜从技术上讲，您仍然在污染您的vm，但至少您不必在整个层次结构中明确地传递它

---

添加文本以满足6个字符的编辑要求，将句点更改为逗号以更正示例。对于新手来说，句号是令人困惑的。

事实上，您不需要通过表单家长就可以做到这一点。在awesome组件的模板中添加一个ng表单标记，并使用它：

组件的模板：

<form name="vm.myForm">
  <my-awesome-input-component model="vm.input1" form="vm.myForm"><my-awesome-input-component>
  <!-- many more inputs -->
</form>

<ng-form name="myComponentForm">
    <input type="number" ng-model="$ctrl.myModel" name="myField"/>
    <span ng-show="myComponentForm.myField.$invalid">There's an error</span>
</ng-form>

有个错误

---

这就是ngForm指令的含义，在指令和组件中包含子表单，以便对表单字段的子组进行验证。

您不必污染视图模型，表单名称纯粹是表单控制器的名称，您可以将其传递给输入组件。您的视图模型应该只需要担心输入值。这是一个很好的示例，但有一件事可能会让人困惑—在您给出的示例中，您没有将表单名称（“myForm”）绑定到组件—而是将实际引用绑定到表单。尽管如此，它仍然很有效，但一开始确实让我有点困惑。

<input type="text" name="myInput" ng-model="$ctrl.myInputModel" ng-change="$ctrl.update($ctrl.myInputModel)" required />
    <div ng-messages="$ctrl.form.myInput.$error">
    <div ng-message="required">Please fill out this field.</div>
</div>

<form name="myForm" ng-submit="ctrl.someFunction()" novalidate>
    <my-input my-input-model="ctrl.anyModelIWant" on-update="ctrl.updateMyInput(value)"></my-input>
    <button type="submit">Some button</button>
</form>

<ng-form name="myComponentForm">
    <input type="number" ng-model="$ctrl.myModel" name="myField"/>
    <span ng-show="myComponentForm.myField.$invalid">There's an error</span>
</ng-form>