如何在 Angular js 中添加使用指令填充的表单验证？

Question

我正在开发AngularJS 中的注册表单。其中我在 4 个不同的地方重复使用相同的表格。为此，我在单个 html 页面上使用通用表单，如下所示。

<div>
   <div>
        <div class="label-div float-left">
            <label>
                Address:
             </label>
            <input type="text" ng-model="addressInfo.addressLine1" />
        </div>
   </div>
</div>

在我使用AngularJS 的directive 注册时，我在如下4 个不同的地方重复使用它

<registration-form></registration-form>
<input type="button" value ="continue" >

我如何禁用注册 html 中的按钮，因为我的指令模板有我的表单内容。

Answer 1

我会将提交按钮放在指令中，并通过将提交按钮传递到指令的范围来处理提交按钮的 ng-click 事件

scope:{
onSubmit;'&'
}

在你的指令链接函数中：

scope.submit=function(){
scope.onSubmit();
}

和你的指令模板：

<div>
   <form name="contactsForm">
        <div class="label-div float-left">
            <label>
                Address:
             </label>
            <input type="text" ng-model="addressInfo.addressLine1" />
            <input type="button" value ="continue" ng-click="submit()" ng-disabled="contactsForm.$invalid" >
        </div>
   </form>
</div>

用法：

<registration-form on-submit="postToServer()"></registration-form>

并在您的父控制器中，放置提交表单时要执行的任何逻辑：

$scope.postToServer=function(){
alert("posting to server");
}

编辑

Plunk.

EDIT 03/02-2014，另一种方法是将指令中的标志传递给父控制器，指示表单是否有效，看看“外部按钮”如何ng-disabled 被挂在 plunk 中（我已经更新了。）