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

Question

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

以同样的方式，我想在表单提交时对更改应用验证。 但无法对动态元素调用验证。

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

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

ngModel 负责：

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

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

• 保持控件的状态 （有效/无效、脏/原始、触摸/未触摸、验证错误）。

• 在元素上设置相关的 css 类（ng-valid、ng-invalid、 ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) 包括动画。

• 使用其注册控件 父窗体。

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

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

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

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