将表单传递给AngularJS组件进行验证 [英] Passing form to AngularJS component for validation

问题描述

我正在将我的遗留代码库迁移到使用AngularJS 1.5推广的新组件架构。我在为更大的表单执行此操作时遇到了问题。传统上，我会附上表格验证如下：

I'm moving my legacy code base to the new component architecture promoted with AngularJS 1.5. I encountered an issue when doing this for larger forms. Traditionally, I would attach form validation as follows:

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

转换到组件架构时，我必须将表单显式传递给组件：

When transitioning to a component architecture, I have to explicitly pass the form to the component:

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

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

I would like to avoid polluting the vm with my form. Is there a better way to achieve the desired component architecture for forms?

推荐答案

更新 - 更改了表单 - 将命名为 form-reference ，因为我们没有明确表示我们传递的是实际的表单引用，而不仅仅是表单的名称。这可以随意调用，只要清楚它实际上是什么。

Update - changed form-name to form-reference, since it was not explicit that we were passing the actual form reference and not just the name of the form. This can be called whatever you wish, just be clear of what it actually is.

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

As the comment from Iain Reid says, you don't need to use vm for this. You just name the form anything you want and then pass that name to your component, so it would look like this:

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

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

Making sure that you write "novalidate" in your form to disable default browser validations, if you want to handle validations on your own(which by your use of ng-messages I think you do).

然后从那里，在我的组件上，我会写一些类似的东西：

Then from there, on my component I would write something like:

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：'&'我在这里说的是我将传递
  函数来更新模型（组件事件的回调）。

• '<' : means one way binding, which Angular says to use for all components from now on. In order to update the value and have two way binding, we need to include a "onUpdate" function.
• onUpdate : '&' what I am saying here is that I will pass a function to update the model(a callback for component events).

因此在输入控制器中我会写出如下内容：

So in the input controller I would write something like:

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

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

And, finally when I use my component inside a 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>

表格的控制器有一个功能：

And the controller of the form would have a function:

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

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

我希望所有这些都可以帮助那些人： - ）

I hope all of this helps someone out there :-)

这篇关于将表单传递给AngularJS组件进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！