Question

在我们的表单中，元素是使用ng-repeat动态创建的。在$ scope.answers中存储表单值。[属性名称]。

以同样的方式，我希望将更改验证应用于表单提交。但无法调用动态元素的验证。

我的html元素（index.html）

<div ng-if="que.QuestionData._fieldType === 'text'" >
                        <text-control-dir data-que-obj="que.QuestionData" ></text-control-dir>  
                        {{answers[que.QuestionData._attributeName]}}
                        <span ng-show="DTOstep1.answers[que.QuestionData._attributeName].$touched && DTOstep1.answers[que.QuestionData._attributeName].$invalid">The name is required.</span>
                    </div>

（controlDirectives.js）指令具有用于表单控件的html。请参阅此plunker以获取完整代码。 https://plnkr.co/edit/GA74YHNFxFb0ARg16Sjj?p=preview

Answer 1

首先，您需要使用ngModel https://docs.angularjs.org/api/ng/directive/ngModel。否则，它不会在您的表单中注册任何验证错误。此外，您不需要elemen.on('change')只需使用ngModel指令。如果您正在使用自己的验证消息，请最后将novalidate属性添加到表单元素中。

ngModel负责：



将视图绑定到模型中，其他指令如输入，   textarea或选择要求。



提供验证行为（即   必填，号码，电子邮件，网址）。



保持控制状态   （有效/无效，脏/原始，触摸/未触摸，验证错误）。



在元素上设置相关的css类（ng-valid，ng-invalid，   ng-dirty，ng-pristine，ng-touching，ng-untouched，ng-empty，   ng-not-empty）包括动画。



将控件注册到其中   父母表格。

顺便说一句ng-前缀指令不需要{{ }}。例如，你不应该写

required="{{queObj._required}}"但required="queObj._required"

这是一个有效的plunker用于text-control-dir

https://plnkr.co/edit/wDPtvj29pt0E6Y7QC0j0?p=preview

AngularJs：如何对指令创建的动态元素应用表单验证

1 个答案: