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

Question

我正在将我的遗留代码库迁移到使用 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>

我想避免用我的表单污染 vm。有没有更好的方法来实现所需的表单组件架构？

Answer 1

更新 - 将 form-name 更改为 form-reference，因为我们没有明确表示我们正在传递实际的表格参考而不仅仅是表格的名称。这个可以随便叫，看清楚是什么就可以了

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

如果您想自己处理验证（我认为您可以通过使用 ng-messages 来处理），请确保在表单中写入 "novalidate" 以禁用默认浏览器验证。

然后从那里开始，在我的组件上我会写这样的东西：

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

然后在输入模板中：

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

关于绑定以及如何传递和更新模型的一些额外说明：

'<' ：表示单向绑定，Angular 表示用于所有从现在开始的组件。为了更新值，有两种方式绑定，我们需要包含一个 "onUpdate" 函数。
onUpdate : '&' 我在这里说的是我会通过一个更新模型的函数（组件事件的回调）。

所以在输入控制器中我会这样写：

function MyInputController(){
    var ctrl = this;
    ctrl.update = function(value){
        ctrl.onUpdate({value: value});
    };
}

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

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

表单的控制器将具有以下功能：

...
ctrl.updateMyInput = function(value){
   ctrl.anyModelIWant = value;
}
...

官方文档：https://docs.angularjs.org/guide/component

我希望所有这些对外面的人有所帮助:-)

Answer 2

这是另一种可能对某些人有用的方法。使用 require 将父级 form 包含在您的 $ctrl:

中

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

在输入模板中：

<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 会自动添加到您的 $ctrl:

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

我想从技术上讲，您仍在污染您的虚拟机，但至少您不必在整个层次结构中显式地传递它。

添加文本以满足 6 个字符的编辑要求，将句号更改为逗号以更正示例。期间对新人来说很混乱。

Answer 3

事实上，您不需要通过父表单来执行此操作。在你的 awesome-component 模板中添加一个 ng-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 指令的含义，在指令和组件中包含子表单以对表单字段的子组进行验证。

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

Passing form to AngularJS component for validation

javascript

web-component

angularjs