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

Posted 2023-05-09

【中文标题】AngularJs：如何对指令创建的动态元素应用表单验证

【英文标题】：AngularJs: how to apply Form validation on dynamic element created by directive

【发布时间】：2016-11-28 18:27:38

【问题描述】：

在我们的表单中，元素是使用 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

【问题讨论】：

你应该使用ngForm指令。

我坚持在这里传递动态名称

【参考方案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

【讨论】：

如何移动

希望在输入框下方和带有红色边框的控件中显示错误消息。

@pandudas 在指令 plnkr.co/edit/cqg0rL0GPcXI4IsaAaWG?p=preview 中使用验证消息工作的插件

谢谢。我对选择控件进行了类似的更改，一切正常，但如果选择的值为空或-1，则两者都应该显示错误。

这个 textControlForm 是什么，这个函数是否适用于 select 和 radio 等所有控件。