我将遗留代码库转移到使用Angular 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.有没有更好的方法来实现表单的所需组件架构？
解决方法
正如Iain Reid的评论所说,你不需要为此使用vm.您只需将表单命名为所需的任何内容,然后将该名称传递给您的组件,因此它将如下所示：
<form name="myForm" ng-submit="ctrl.someFunction()" novalidate> <my-input form-name="myForm"></my-input> <button type="submit">Some button</button> </form>
确保您在表单中写“novalidate”以禁用默认浏览器验证,如果您想自己处理验证(通过使用我认为您所做的ng消息).
然后从那里,在我的组件上,我会写下如下：
angular.module("myApp")
.component("myInput",{
templateUrl:'path/to/template.html'
bindings:{
formName:'<',myInputModel:'<',onUpdate:'&'
},controller: MyInputController
}
然后在输入模板中：
<input type="text" name="myInput" ng-model="$ctrl.myInputModel" ng-change="$ctrl.update($ctrl.myInputModel)" required /> <div ng-messages="$ctrl.formName.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-name="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
我希望所有这些有助于某人在那里:-)
